路由的使用大致分為四步
路由即一個url地址對應一個組件
1.書寫路由的配置文件
2.在new Vue實例里面注入router
3.在需要跳轉的視圖里面寫router-link標簽
4.在需要顯示路由進來的組件的地方寫router-view標簽
第一步:書寫路由的配置文件
import Vue from "vue";
import VueRouter from "vue-router";
import index from "@/views/index";
//如果import引來的變量不是export default輸出的值,必須用大括號{}
import {a} from "./router"
引入文件晌砾,import引入的地址只有名字谭网,沒有路徑怖侦,說明它是node_module里面的包
Vue.use(VueRouter);
在組件化工程里面,必須要這一步
export default new VueRouter({
mode:"history",
routes:[
//默認路由
{path:"/",component:filmList},
{path:"/filmList/:id",component:filmList,props:true},
//普通路由
{
path:"/index",
component:index,
children:[
//子路由的路徑前不要加斜線,因為斜線表示根目錄的意思
{path:"about",component:about}
]
},
//可以通過watch監(jiān)聽動態(tài)路由的參數(shù)變化
//動態(tài)路由
{path:"/list/:name",component:list,props:true},
]
})
第三步
<router-link to='/index'>點擊跳轉到index</router-link>
點擊router-link可以連接到index組件毙石;vue路由的跳轉其實是錨點跳轉
第四步
<router-view></router-view>
index組件鏈接進來后要顯示在位置在router-view里面