简介vue-router
首先，先看一下默认项目中的路由结构
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}，
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
这是router目录下的index.js,用来配置路由规则和路径。最后输出挂在到main.js
中创建vue实例上。上述例子就是一个动态路由的配置，组件和path做为关联。看一下官方的解释：
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
path路径后面带有参数，:id也可以是?id这种形式。this.$route.params可以接受的值。这就涉及到路由传值，下面会详细介绍路由传值的各种方式。
var router = new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/index',
name: 'index',
component: index
},
{
path: '/detail?:id',//路由方式传值
name: 'detail',
component: detail
}
]
})
配置的小项目中的路由。路由中如何跳转和使用呢？
//和后台请求balabala一大堆操作，成功执行下面操作就可以跳转到index页面。
this.$router.replace({ path: "/index" });
其他的跳转用法和区别：
this.$router.push()---跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。
this.$router.replace()---同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n)---相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
路由传值的三种方式
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
// 方案一，需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。
// 在子组件中可以使用来获取传递的参数值。
$route.params.id
// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中: 这样来获取参数
$route.params.id
[](javascript:void(0); "复制代码")
<pre>// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？ this.$router.push({
path: '/describe',
query: {
id: id
}
}) // 对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
} // 对应子组件: 这样来获取参数
$route.query.id // 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~</pre>
参考：https://www.cnblogs.com/EnSnail/p/8458001.html
