Vue路由
Vuerouter是Vue的一个路由插件
让vue 实现单页面应用 SPA（single page application）
整个应用程序只有一个HTML文件
单页面优点：减少http请求，加快页面加载性能，切换页不要重新加载
缺点：不利于SEO（搜索引擎优化）（nuxt）

引入

<script src="../vue.js"></script>                     //要在vue.js后面引入，
<script src="../vue-router.js"></script>               //往vue构造函数里添加了两个属性

const routes = [                        定义在外部，方便复用性       //路由规则，path参数表示路径，component表示这个组件注册为了路由组件    
        { path: "/one", component: one },    
        { path: "/two", component: two },
      ];
     //定义路由 
     const router = new VueRouter({  
        routes,
      });

 <div id="app1">
      <router-view></router-view>        //路由出口
    </div>

路由跳转
one 里面to属性写要跳转的路由，tab写跳转的样式，默认为a标签
two
routerlink选中的标签的有两个类
1.router-link-exact-active //准确的匹配，只有当前选中的路由组件才会被匹配
1.router-link-active //包含的匹配，不止自己有，包含自己路由的也会被匹配

动态路由

  const routes = [
        { path: "/one/:shopid", component: one },         //动态路由在后面加上:变量
        { path: "/two", component: two },
      ];

 <router-link to="/one/1">one</router-link>           //在to里面传值

路由组件里面有两个属性
$route 其是一个对象，保存了路由的信息用来获取路由参数，传过来的值可以通过其params属性获取
console.log(this.$route.params.shopid);可以通过watch属性监听动态变化，并进行一些操作

 watch: {
          $route(to, from) {     //新的路由，  //老的路由
            console.log(123);
            console.log(to);
            console.log(from);
          },

$router 其是一个构造函数，用来操作路由

嵌套路由
给一级路由里面添加children属性

{
          path: "/two",
          component: two,
          children: [                            //其值是一个数组
            { path: "/two/a", component: twoa },     //可以不写/two，但是其父级路由不会有router-active这个类；了，建议加上
            { path: "/two/b", component: twob },
          ],
        },

<template id="two">
      <div>
        这是two
        <router-link to="/two/a">去a</router-link>  
        <router-link to="/two/b">去b</router-link>
        <router-view></router-view>                      //视图中也要嵌套
      </div>
    </template>

路由重定向
概念：当用户访问指定路由时，将其重定向到你规定的路由，比如默认首页等等
redirect
{ path: "/", redirect: "/one/1" }, 其里面添加redirect属性

{                  
         path: "/two",                        
         component: two,

         children: [
           { path: "/two", redirect: "/two/a" },      //二级路由重定向
           { path: "/two/a", component: twoa },
           { path: "/two/b", component: twob },
         ],
       }, 

重定向解决404
{ path: "*", component: not }, //*表示匹配任意路由，但其优先度并不高，最好写在最后，为了代码语义化

命名路由
{ path: "/one/:shopid", component: one, name: "壹" }, //往路由添加name属性就行
路由跳转的时候就可以

<router-link
       :to="{                   //将to属性前面加上:，这样其值变成对象，添加name属性就可以正常跳转
       name:`壹`
     }"
       >one</router-link
     >

命名视图（不重要）
如果想同时（同级）展示多个视图，而不是嵌套展示的话，就可以使用命名视图

 <router-view name="yi"></router-view>        //定义多个路由出口，并添加name属性
  <router-view name="er"></router-view>

 {
          path: "/one/:shopid",
          components: {                                           //换成components属性，其属性是一个对象，写起路由出口对应的路由组件
            yi: one,
            er: two,
          },
          name: "壹",
        },

编程式导航
导航分为两种
声明式：利用组件 跳转标签 router-link标签
编程式: js通过方法来动态控制
this.$router.push("/two/a"); push所传参数和router-link的to属性一样

jumptwob() {
            this.$router.replace("/two/a");           所传参数和router-link的to属性一样，
          },  

tips：
push和replace区别
push是往里面添加历史记录，
replace不会添加新历史记录，而是替换当前记录

this.$router.go(0);
参数：
0 刷新
1 前进一步
-1 后退一步
n 前进n步

别名 alias
{ path: "/two/b", component: twob, alias: "xixix" }, 可以利用其别名跳转，但是匹配规则仍是path
路由跳转传参
三种方式
1.动态路由传参
<router-link :to="/one/${msg}">one</router-link> 改成：

{ path: "/one/:shopid", component: one }, 都要改成动态的
优点：数据刷新依然存在，
缺点：数据暴露在地址栏

2.params传参

+声明式
one

+编程式

chuanzhi() {
           this.$router.push({
             name: "yi",
             params: {
               msg: this.msg,
             },
           });
         },
       },
     });

注意，用其传参必须要使用路由的name属性，否则传不了值
获取参数
this.$route.params.msg
优点：不会暴露在地址栏
缺点：数据一刷新就会不存在

3.query传参
+声明式

 <router-link
        :to="{
          name:`yi`,
          query:{
                   msg,                //和params差不多，改用query属性就成
          }
      }"
        >one</router-link
      >

+编程式

chuanzhi() {
            this.$router.push({
              name: "yi",
              query: {
                msg: this.msg,
              },
            });
          },

获取参数
this.$route.query.msg
优点：不数据刷新依然存在
缺点：数据暴露在地址栏

路由模式
默认是hash模式，
缺点：丑
优点：不会改变html的文件路径指向

history模式
优点：好看
缺点：会改变html文件的指向关系

 ```

const router = new VueRouter({
routes, //使用其不能再本地环境使用，因为/本地环境默认为盘符，在服务器环境使用，需要在服
//务器端做重定向
mode: "history",
});

原理
hash：
改变url后面的hash值，通过window的hashchange事件监听其变化，根据定义的路由规则，来加载对应的组件
history：
history新增两个方法pushstate（）和replacestate（）改变url地址，匹配其路由规则