一、路由与路由器
路由(route):路径和组件的匹配；
路由器(router)：管理这些匹配规则的一个管理者；
vue-router的理解
vue的⼀个插件库，专⻔⽤来实现SPA应⽤
对SPA应⽤的理解
1. 单⻚⾯web应⽤（single page web application，SPA）
2. 整个应⽤只有⼀个完整的⻚⾯
3. 点击⻚⾯中的导航链接不会刷新⻚⾯，只会做⻚⾯的局部更新
4. 数据需要通过ajax请求获取 路由的理解
1. 什么是路由？
⼀个路由就是⼀组映射关系（key-value），key为路径，value为component（⽤于展示⻚⾯内容）
⼯作过程：当浏览器的路径改变时，对应的组件就会显示
二、路由的基本使用
// 安装路由之后，在main.js引入路由器
import VueRouter from 'vue-router'
// 注册全局使用
Vue.use(VueRouter)- 3. 编写router配置项
编写router文件夹里的index.js文件：
// 引入路由
import VueRouter from 'vue-router'
// 引入组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
// 创建router实例对象，让他去管理我们对应的关系
const router=new VueRouter({
// vue-router 默认 hash 模式 当使⽤ history 模式时，URL 就像正常的 url。url去掉了#
mode:'history',
routes:[
{
path:'/home',//路径
component:Home,//组件
//好处和坏处：当一个路由出现问题的时候，会自动重定向到另外一个路由上去，保证你的数据畅通。
坏处：可能会出现一定的延时，造成网速变慢。但是一切都是由路由器的路由表自动控制的。
//路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址B，从而在展示特定的组件页面(相当于
在点击跳转一个页面的时候设置一个默认显示的内容区域)
//通过路由规则的redirect 属性,指定一个新的路由地址，可以很方便地设置路由的重定向
redirect: '/About',//路由重定向，
},
{
path:'/About',
component:About,
},
{
path:"/views/test",
component:()=>import('../views/test.vue'),//注册组件的另一种写法,不需要导出名字
children:[{
// '/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
path:"test2",
component:()=>import('../views/test2.vue'),//
}]
},
]
})
//暴露router 导出
export default routermain.js：（在main.js引入上面写的路由配置）
// 引入写的路由路径
import router from './router/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注册路径
router,
}).$mount('#app')在APP.vue使用路由转跳（使用方案一进行转跳）：（注意：要完成路由的基本配置才能进行路由的转跳）
<!-- 用于路径跳转 根据路径实现跳转-->
<router-link to="/home">home</router-link><br>
<router-link to="/About">about</router-link><hr>
<router-link to="/views/test">test
</router-link> <router-link to="/test2">test2</router-link>
<!-- 容器 告诉vue将通过路径拿到的组件放到哪里去 , 用于显示路径里的组件的内容-->
<router-view></router-view>三、路由跳转的方式
方案一：声明式导航router-link
不带参数：
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
//对象写法要动态绑定，也可以不用对象写法。 路径是对应路由的配置
<router-link to="/home">//不能动态绑定
带参数：
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
<router-link :to="/home/:id">
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>name方式与 path方式的区别：
<router-link :to="{path:'/home/message/details',query:{id:m.id}}">查看详情</router-link>
<!-- name 路由的简化写法，不用写/路径，在路由配置文件路径那使用name,这里直接使用name属性，更便捷 -->
<router-link :to="{name:'xxx',query:{id:m.id}}">查看详情</router-link>方案二：编程式导航 this.$router.push()
2.1不带参数：
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2.2 query传参：
1.在路由文件配置 路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.在转跳到的页面接收获取参数
html取参: $route.query.id
script取参: this.$route.query.id
2.3 params传参:
1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id') 注意：与上面query不同
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.在转跳到的页面接收获取参数
html取参:$route.params.id
script取参:this.$route.params.id
2.4 直接通过path传参:
1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'})
或者：
this.$router.push('/home/123')
3.在转跳到的页面接收获取参数：
this.$route.params.id2.5 params和query的区别
query类似 get，跳转之后页面 url后面会拼接参数，类似?id=1。
非重要性的可以这样传，密码之类还是用params，刷新页面id还在。
params类似 post，跳转之后页面 url后面不会拼接参数。
query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变 ;params: 参数不会显示在url地址上，刷新页面参数会消失，不能和path合作传参
query：参数会显示在url地址上，刷新页面不会消失 能和name以及path合作传递参数
方案三 this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
方案四 this.$router.replace
说明：跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
跟 router.push 很像，唯⼀的不同就是，它不会向 history 添加新记录，⽽是跟它的⽅法名⼀样 —— 替换掉 当前的 history 记录。（与window.location.replace('index.html')原理一样）
this.$router.replace({ name:'about', params:{ id:666 } })
其他方式
this.$router.forward() //前进
this.$router.back() //后退
总结：
1.query可以用name和path匹配路由，通过this.$route.query.id获取参数，刷新浏览器参数不会丢失
2.params只能用name匹配路由，通过path匹配路由获取不到参数，对应的路由配置path:'/home/:id'或者path:'home:id'，否则刷新浏览器参数丢失
3.直接通过url传参，push({path: '/home/123'})或者push('/home/123')，对应的路由配置path:'/home/:id'，刷新浏览器参数不会丢失。
