vue-router

单页	多页
页面性能高，用户体验好
首屏加载慢
系统类网站/内部网站/文档类网站/移动端站点	公司官网/电商类网站

按需更新 - 访问路径和组件的对应关系 - 路由

import VueRouter from 'vue-router'; //1.引入
import Vue from 'vue';
Vue.use(VueRouter); //2.插件初始化

const router = new VueRouter({
    routes: [
        { path: '/find', component: Find },
        { path: '/my', component: My },
        { path: '/friend', component: Friend },
    ]
});
-------------
<a href='#/find'>发现</a>

router-link

<router-link to='/find'>发现</router-link>

渲染到页面上就是a标签，可以给当前导航自动添加高亮样式

• router-link-active 模糊匹配 to='/my'可以匹配 /my /my/a /my/b
• router-link-exact-active

声明式导航

查询参数传参-适合多个参数

 <router-link to="/find?key=aaa">发现音乐</router-link>
 --------------
  <div>
    <div>我的朋友</div>
    {{ $route.query.key }}
  </div>
  --------
  created() {
    console.log(this.$route.query);
  },

动态路由传参-单个参数

{ path: '/find/:words?', component: Find }, 路由规则，必须传参数/?表示参数可选
------------------
$route.params.words

重定向

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

编程式导航

this.$router.push('/path?name=aaa&age=19');
this.$router.push({
   path:'/path'
   query:{
     name:aaa,
     age:19
   }   
});