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使用
- 下载
- main.js中引入
- 安装插件
Vue.use(VueRouter)
- 创建路由对象并配置路由规则
let router = new VueRouter ({routes:[{path: '/home' ,component: Home }]});
- 将其路由对象传递给Vue的实例，options中加入 router:router
- 在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.传递参数
- <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}}
- url传递参数——在配置文件里以冒号的形式设置参数
{
path:'/test/:userName/:userId',
component:Test
}
// 获取参数
{{ $route.test.userName}}
{{ $route.test.userId}}
- path匹配路由，query来传递参数
<router-link :to="{ name:'Test',query: { userId: 111}}"></router-link>
// 获取参数
this.$route.query.userId
