一荞雏、安裝依賴
1. Vue-router模塊
Vue的路由功能主要依靠Vue-router模塊來實(shí)現(xiàn)滴铅，所以必須在項(xiàng)目中安裝該依賴模塊
npm i Vue-router
2. Vue.use()明確說明要使用路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
二汗贫、使用路由的4大步驟
1. 定義（路由）組件
組件可以從其他文件import進(jìn)來
//導(dǎo)入組件
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
//定義組件
const Foo = { template: '<div>foo</div>' }
2. 定義路由
定義一個(gè)路由有很多選項(xiàng)，比如路由的路徑path万牺，name关顷，組件等等。所有定義的路由被放到一個(gè)數(shù)組里始衅，每個(gè)定義路由用對(duì)象形式堪伍。
// 定義路由
export default [
//一個(gè)簡(jiǎn)單的路由
{
path: '/',
redirect: '/app'
},
//一個(gè)寫了較多配置的路由
{
path: '/app/:id',
props: (route) => ({ id: route.query.b }), // 可以將id以props的形式傳給Todo組件
component: () => import('../views/todo/todo.vue'),
name: 'app',
meta: {
title: 'this is app',
description: 'i am apple'
},
beforeEnter (to, from, next) {
console.log('app route before enter')
next()
}
children: [
{
path: 'test',
component: Login
}
]
},
]
3. 創(chuàng)建router實(shí)例，然后把第2步的配置傳進(jìn)來
const router = new ({
routes: routes //或者直接縮寫routes
}）
4. 在根實(shí)例注入路由實(shí)例
從根實(shí)例注入第3步創(chuàng)建的路由實(shí)例觅闽，則整個(gè)應(yīng)用都有路由功能
new Vue({
router, //這樣就把第3步創(chuàng)建的router實(shí)例注入到了根實(shí)例
render: (h) => h(App)
}).$mount('#root') // mount(root),將App組件掛載到入口文件index.js的root這個(gè)dom元素上
三帝雇、在模板文件進(jìn)行路由導(dǎo)航
1. <router-link>導(dǎo)航【this.$router.push({path:"})】
router-link的導(dǎo)航方式有以下幾種
@1 : 直接在to屬性指明路由路徑進(jìn)行匹配路由
<router-link to="/app/123">app123</router-link>
@2 : 使用v:bind:path匹配路由定義的name選項(xiàng)，進(jìn)而達(dá)到路由的目的
<router-link :to="{ path: "/app/123" }"> app123 </router-link>
<router-link :to="{ path: "/app",params: { userId: 123 } }"> app123 </router-link>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
@3 :使用name來路由
注意：這種方式 to前面一定要加v-bind(:),這樣才會(huì)編譯蛉拙，否則尸闸，會(huì)把to當(dāng)原來的屬性，認(rèn)為to的內(nèi)容就是路徑
<router-link :to="{ name: 'app', params: { userId: 123 }}">User</router-link>
2. <router-view>渲染
在router-link導(dǎo)航到的路由孕锄，將會(huì)把這個(gè)路由的匹配組件內(nèi)容渲染到router-view所在的位置吮廉。
router-view只有一個(gè)name屬性，用于區(qū)分多個(gè)路由渲染的不同的位置畸肆。
