路由是vue進行“頁面跳轉(zhuǎn)”的實現(xiàn)方式斗遏，而vue-router是vue的一個路由組件乌叶。
https://router.vuejs.org/zh/guide/
主要包含了一個router.js文件可以在src中建立也可在src中建router包并在包中創(chuàng)建index.js文件內(nèi)容相同栈顷，只是大家的項目文件結(jié)構(gòu)不同。
<router-link to="">lalalal</router-link>標簽值依，渲染為<a>標簽用于觸發(fā)路由
<router-view></router-view>路由的器皿奋渔，用于存放路由跳轉(zhuǎn)后需要顯示的內(nèi)容
js跳轉(zhuǎn)方法
this.$router.go(-1)//向前退一步
this.$router.push('/XXXX')//跳轉(zhuǎn)至
router.js
//引入vue與vue-router
import Vue from "vue";
import VueRouter from "vue-router";
// 引入組件
import home from "./components/home.vue";
// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
{
path:"/home",
component: home
},
]
var router = new VueRouter({
routes
})
export default router;
一、動態(tài)路由
路由包含信息物臂，因此為動態(tài)的如下代碼中：id參數(shù)名
<router-link :to='/user/232'>傳入id
在跳轉(zhuǎn)到的頁面通過{{$router.params.id}}獲取id如<p>{{$router.params.id}}</p>
| 模式 | 匹配路徑 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 } |
const router = new VueRouter({
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{ path: '/user/:id',
component: User
}
]
})
二旺拉、嵌套路由
父子路由形成樹狀結(jié)構(gòu)，利于管理與查找
注意在子路由path中沒有/
在引用子路由時<router-link to="/about/about2">lalalal</router-link>在：to地址為父路由地址加子路由地址
const routes = [
{
path: "/about",
component: about,
abouts: [{
path: "about1",
component: about1
}, {
path: "about2",
component: about2
}]
}
]
三棵磷、編程式路由
js的方式控制路由
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)蛾狗，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
push參數(shù)的方式
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
四、命名路由
給每個路由起名字在引用的時候使用name進行引用
引用
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
routers：
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
