Vue router当使用路由参数时，例如从 /user/foo 导航到 /user/bar，user组件会被复用。因为

创建一个Vue router

安装 vue router
src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import 组件名 from '@/components/组件名';

Vue.use(Router)
export default new Router({
  routes:[
    {
      name:'post_list',
      path:'/',
      component:PostList
    }
  ]
})

src/main.js

import router from './router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

两种传递参数方式 `params` `query` 区别

区别在于params类似post方式，直接把参数的值放到地址栏上但不显示参数名
query类似get请求，则是显示参数名的?id=1

 <router-link :to="{ path:'/', query: { id: 1 } }">hello</router-link>  /?id=1
 <router-link :to="{ path:'/',, params: { id: 1 } }">hello</router-link> /1

query在路由配置不需要预先设置参数，而params必须设置

 routes: [
 // 这叫预先设置参数
    { name: "bababa", path: "/helloworld/:id", component: HelloWorld },
 // 这就没预先设置参数
    { name: "aaa", path: "/hello/", component: Hello }
  ]

获取参数

{{$route.params.id}}
{{$route.query.id}}

命名视图

用于解决一个路径下多个平级组件的展示
未使用命名视图时option名为component, 用了命名视图后则为components接一个对象官网在线示例

routes:[
    {
      name:'post_list',
      path:'/',
      components: {main:PostList}
    },
    {
      name:'post_content',
      path:'/topic/:id&author=:name',
      components: {main:Article,aside:SideBar}
    },
    {
      name:'user_info',
      path:'/user/:name',
      components: {main:User}
    }
  ]

响应路由参数的变化

官网解释

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，user组件会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。(如果你获取数据写在beforeMounted中，进入不同参数的同路径时，自然就不会再执行一遍了)

 watch: {
    '$route'(to, from) {
      this.getData(); // 类似的执行一些重新获取数据的操作
    }
  },

下图所示，点击右边侧边栏的链接其实都是进入/topic/这里接参数的路径，也就是说当前正处于同路径中，只是参数不同而已，你还要进入同路径不同参数的url中，那么router是不会为你刷新页面的，这时就要去特地监听以下路由的变化手动加载数据了

路由跳转的几种方式

router-link

1. 不带参数
 <router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
 2.带参数
 <router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

this.$router.push()

1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id

this.$router.replace() (用法同上,push)

// view中的replace写法, 只要加上replace即可
<router-link :to="..." replace ></router-link>
// 而不加上replace字样则默认就是push了
<router-link :to="..."></router-link>

this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

`this.$router.push`与`this.$router.replace`区别

push跳转到指定url路径，并向history栈中添加一个记录，点击浏览器的后退会返回到上一个页面
replace跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

Vue router