路由是vue进行“页面跳转”的实现方式，而vue-router是vue的一个路由组件。
https://router.vuejs.org/zh/guide/
主要包含了一个router.js文件可以在src中建立也可在src中建router包并在包中创建index.js文件内容相同，只是大家的项目文件结构不同。
<router-link to="">lalalal</router-link>标签，渲染为<a>标签用于触发路由
<router-view></router-view>路由的器皿，用于存放路由跳转后需要显示的内容
js跳转方法
this.$router.go(-1)//向前退一步
this.$router.push('/XXXX')//跳转至
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;
一、动态路由
路由包含信息，因此为动态的如下代码中：id参数名
<router-link :to='/user/232'>传入id
在跳转到的页面通过{{$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: [
// 动态路径参数 以冒号开头
{ path: '/user/:id',
component: User
}
]
})
二、嵌套路由
父子路由形成树状结构，利于管理与查找
注意在子路由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 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
push参数的方式
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
}
]
})
