vue-router(路由)的使用

• 属性1 path表示监听哪个路由链接地址
• 属性2 component，表示如果路由是前面匹配到的path，则展示component属性对应的组件，component属性值必须是一个组件模板对象，不能是组件的引用名称
• 属性3 name，路由名称

一、vue-router

　　用于渲染匹配到的组件

<router-view></router-view>

　　还可以配合<keep-alive>使用，keep-alive可以缓存数据，这样不至于重新渲染路由组件的时候，之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b，再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。如果你的应用里有一个购物车组件，就需要用到keep-alive。

<keep-alive>
    <router-view></router-view>
</keep-alive>

　　传参：

　　常见的路由参数传递有两种：1、params 动态路由参数。2、query 查询参数。

在router路由配置文件里设置：

{path:'/login/:id',component:login}

{path:'/params/:newsId/:userName,component:login}//多个参数

在组件中设置：

<p>用户名：{{ $route.params.userName}}</p>

<h2>登录----{{$route.query.id}}</h2>

　　冒号 :后面是路径参数，当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。

二、router-link

　　它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。被选中的router-link将自动添加一个class属性值.router-link-active。

　<router-link to="/">[text]</router-link>

• to：导航路径， to="/" 导航到默认首页
• [text] ：就是我们要显示给用户的导航名称

　　传参：

<router-link :to = "{name:'login',params:{'id':1}}">登录params</router-link>
<router-link :to = "{path:'register',query:{'userId':2}}">注册query</router-link>

<router-link to="/login?id=10">登录</router-link>

 组件中获取参数：

<template>
    <div>
      用户: {{ $route.params.id }}
    </div>
</template>

 params传参和query传参有什么区别？

　　刚query要用path来引入，params要用name来引入,接收参数都是类似的，分别是this.route.query.name和this.route.params.name。

　　query在浏览器地址栏中显示参数，params则不显示。

三、路由redirect重定向，设置默认组件

{path:'/',redirect:'login'},

四、复用组件时，监听路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用

watch: {
   '$route' (to, from) {
 
    // 对路由变化作出响应...
 
    }
}

(2).beforeRouteUpdate 导航守卫
如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate来响应这个变化 (比如抓取用户信息)。

五、多视图（命名视图）

https://router.vuejs.org/zh/guide/essentials/named-views.html

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

app.vue

<template>
  <div id="app">
    <router-view class="top" name="top"/>
    <router-view class="left" name="left"/>
    <router-view class="main"/>
  </div>
</template>

路由 index.js

Vue.use(Router)
// 导出一个默认的组件
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Main,
        top: Top,
        left: Left
      }
    }]
})

然后分别创建3个组件： main.vue（内容视图）、top.vue（顶部导航视图）、left.vue（菜单视图）

this.$router.push()跳转到不同的url，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

this.$router.replace()跳转到指定url路径，但是history栈不会有记录，点击返回会跳转到上上个页面

六、router的beforeEach与afterEach钩子函数

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

1、

/*在跳转之前执行*/
Vue.beforeEach(function(to,form,next){})  

2、

/*在跳转之后判断*/
Vue.afterEach(function(to,form))

3、

全局钩子函数
router.beforeEach((to, from, next) => {
    let token = router.app.$storage.fetch("token");
    let needAuth = to.matched.some(item => item.meta.login);
    if(!token && needAuth) return next({path: "/login"});
    next();
});

 七、router-view组件间传值

1、router-view 子组件传父组件

父组件：
<template>
  <div id="app">
    <router-view @getUser="getUserInfo"/>
  </div>
</template>
<script>
export default {
  methods:{
    getUserInfo(val){
      console.log(val+"-->父组件");// 输出：我是home组-->父组件

} } } </script>

子组件：
<template>
  <div class="home">
    <input type="button"  @click="test" value="登录">
  </div>
</template>
<script>
export default {
  name: "home",
  components: {
  },
  methods: {
    test() {
      this.$emit("getUser", "我是home组件");
    }
  }
};
</script>

2、router-view 父组件传子组件

父组件：
<template>
  <div id="app">
    <router-view :userSubValue="userData" />
  </div>
</template>
<script>
export default {
  data(){
    return { userData:" 父组件数据"}
  }
};
</script>

子组件：
<template>
  <div class="home">{{user}}</div>
</template>
<script>
export default {
  name: "home",
  data() {
    return { user: "" };
  },
  props: ["userSubValue"],
  created() {
    this.getUserValue();
  },
  methods: {
    getUserValue() {
      this.user=this.userSubValue;
    }
  }
};
</script>