vue-router

1.vue-router是什么？

简单点来说，vue-router就是SPA（单页应用）的路径管理器。路由模块的本质就是建立url和页面之间的映射关系。

2.vue-router实现原理

SPA：单一页面应用程序，只有一个完整的页面，在加载页面时不会加载整个页面，而是只更新某个指定容器的内容，SPA的核心之一就是更新视图而不重新请求页面。

vue-router提供了两种实现方式： Hash模式和History模式，由mode参数指定采用哪一种方式实现。

1)Hash模式:
默认模式——使用URL的hash，模拟一个完整的URL，hash（#）是URL的锚点，代表的是网页中的一个位置；根据这个锚点值的不同，渲染指定DOM位置的不同数据。hash模式的原理是onhashchange事件(监测hash值变化)，在 window 对象上可以监听这个事件。

2)History模式:
指定mode属性的值为history，URL中不会有#，但这种模式需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，默认返回到同一个index.html页面

export const routes = [ 
  {path: "/", name: "homeLink", component:Home},
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login}
]

这里设置URL匹配不到静态资源时，自动跳到Home页面

3) 使用路由模块实现页面跳转的方式:
方式1：直接修改地址栏
方式2：this.$router.push(‘路由地址’)
方式3： <router-linkto="路由地址"></router-link>

3.vue-router使用

1. 下载
2. main.js中引入
3. 安装插件

 Vue.use(VueRouter)

4. 创建路由对象并配置路由规则

let router =  new VueRouter ({routes:[{path: '/home' ,component: Home }]});

5. 将其路由对象传递给Vue的实例，options中加入 router:router
6. 在app.vue中留坑 <router-view></router-view>这一步千万不能忘

//具体实现代码
//main.js文件中引入

import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
import Home from './components/home.vue';

//安装插件
//挂载属性
Vue.use(VueRouter); 

//创建路由对象并配置路由规则
let router = new VueRouter(
{ 
 routes: [
//一个个对象
 { 
path: '/home', 
component: Home
 }
]
});

//new Vue 启动
new Vue({
    el: '#app',
//让vue知道我们的路由规则
    router, 
    render: c => c(App),
})

app.vue中留坑

<template>  
 <div>
  // 留坑
  <router-view></router-view>
 </div>
</template>

<script>
export default  {
        data(){            
          return {}
        }
 }
</script>

4.传递参数

1. <router-link> 标签中的to传参

// src/App.vue中
<router-link :to="{name:'test',params:{username:'li',id:'01'}}">test1</router-link>
// src/router/index.js中配置路由
{path:'/test',name:'test',component:Test}
//在模板里(src/components/Test.vue)用 $route.params.username进行接收
{{$route.params.username}}-{{$route.params.id}}

2. url传递参数——在配置文件里以冒号的形式设置参数

{
 path:'/test/:userName/:userId',
 component:Test
}
// 获取参数
{{ $route.test.userName}}
{{ $route.test.userId}}

3. path匹配路由，query来传递参数

<router-link :to="{ name:'Test',query: { userId:  111}}"></router-link>
// 获取参数
this.$route.query.userId