2.8 路由基礎(chǔ)(router)
自我感覺,主要是用來不同網(wǎng)頁(yè)通信的,不知道對(duì)不對(duì),知識(shí)點(diǎn)比較稀碎回梧,這里主要使用vue-cli來完成
npm i vue-router
-
touch router.js
明確說明使用路由
import Vue from 'vue';
import VueRouter from 'vue-router';
import pageA from './pages/a.vue';
import pageB from './pages/b.vue';
//明確說明使用路由
Vue.use(VueRouter)
//配置路徑
consts routes=[
{
path:'./pagea',
component:pageA
},{path:'./pageb',
component:pageB
}
]
//實(shí)例化
const router=new VueRouter({
routes
})
export default router
3.App.vue中做如下設(shè)置
import router from './router
new Vue({
router
}).$mount('#app')
4.配置runtimeCompile,在項(xiàng)目根目錄中
touch vue.config.js
modules.export={
runtimeCompiler:true
}
5.<route-view></route-view>
的使用
模板為根目錄中Public/index.html
<div id="app">
<route-view></route-view>
</div>
內(nèi)容將會(huì)被掛載在網(wǎng)頁(yè)中
6.<route-link to="./pagea">pagea<route-link>
路由的切換
<route-link to="./pageb">pageb<route-link>
這里to后面的部分县袱,需要與2中的配置路徑一致
2中是router的實(shí)例化,3中是項(xiàng)目實(shí)例化享扔,實(shí)例化后底桂,將路由掛載到文檔中