与路由相关的vue标签
router-link
router-link标签是vue提供路由跳转的标签，通过给标签设置to属性，to属性内部书写是要跳转的路径（也就是url），这个标签在页面展示时，会被渲染成a标签，如果需要更在渲染时，展示什么标签，需要给标签设置tag属性，属性值就是你要他渲染成什么标签的标签名
书写格式
<router-link to="/" tag="div"></router-link>
router-view
router-view标签的作用是内容展示，当路由进行切换时，该路由展示的位置，标签会被渲染成div标签。
书写格式
<router-view></router-view>
路由先关配置
在配置路由相关信息时，需要在路由的文件（index.js）文件内，找到router选项内部进行配置，该选项是配置路由与组件之间的关系
基础参数
- path属性，他代表的是组件的路径也就是url，他的内容需要与router里面的to属性保持一致。
-
component属性，每一个路由都要映射
(对应一个组件)一个组件，在书写时需要书写组件名称。 - redirect属性，是路由重定向，参数是要设置的组件路径，设置这个属性的意思就是，当运行项目打开时，默认去展示的页面组件
- name属性，添加name属性，是为了组件之间更方便跳转，无需麻烦的设置to属性添加路径。
router:[{
path: '路径地址（/user）'，
component: 组件名,
name: '组件名'
redirect: '路径地址（/user）'
}]
路由懒加载
- 方式一
const 组件名 = () => import(组件路径)
- 方式二
{
path:'',
component: () => import(组件路径)
}
- 打包时，打包的名字过长，需要路径里面设置如下格式内容
component: () => import(/* webpackChunKName: '名字自定义可以使用组件名' */组件路径)
路由嵌套使用
路由嵌套使用，当前组件下还有子组件，可以使用路由嵌套，进行设置需在当前组件路由配置下，添加children（孩子）属性，属性内部配置相同，如果有多个子组件，可以给属性设置成数组，内部有多个对象组成。
书写格式
router:[{
path: '/',
name: 'user',
component: () => import(/* webpackChunKName 'user' */组件路径),
children: [{
path: '子组件一',
component: () => import(组件路径)
},{
path: '子组件二'，
component: () => import(组件路径)
}]
}]
命名视图（同级多个组件显示）
命名视图使用场景，当触发一个按钮，显示多个同级组件，需要在同一个页面上进行显示，但是router-view标签内部只能展示这个组件，需要设置多个标签，但标签内部无法指定显示哪一个组件，通过给标签设置name属性，指定展示哪一个组件
书写格式
- 给标签设置name属性
- 多个展示最多有一个没有设置name值，是默认导出的组件
<!-- 点击按钮显示多个不同组件 -->
<router-link to="/">点击按钮</router-link>
<router-link to="user">点击按钮</router-link>
<router-view name="sidebar"></router-view>
<touter-view></touter-view>
- 路由配置信息
- 需要将
component改变成components - 默认导出也就是不需要router-view设置name属性，未设置name的标签，就会默认展示默认导出的这个组件
- 需要将
router:[
{
path:'/'，
components:{
// 默认导出，默认导出的组件会在没有设置name值的标签内进行显示。
default: 组件名,
// 前面设置的是在标签上设置的name名字，后面是要展示的组件名字。
sidebar: 组件名
}
}
]
动态路由
- 设置动态路由
在配置组件路由时，在路径的部分加上：后面接参数，例如id等
router:[{
path: '/user/:id',
component: () => import(组件路径)
}]
- 如何访问动态路由参数
通过使用$route.params进行参数访问
$route.params.id
route
- $toute
是路由相关规则操作对象，内部存储当前路由的信息
- $touter
保存的路由的实例对象，
编程式导航
在处理一些处理时候，不需要用户点击页面上的按钮，我们可以通过此方法通过$router.push()跳转到相应的路由上，在使用后的过程中，可以根据路由设置的name属性，进行跳转。
书写格式
<button @click="$router.push({
// 里面可以传递多个参数
name:'要跳转的路由设置的name属性'
})"></button>
<button @click='$router.push({
path: '/路径'
})'>
</button>
在方法里面书写需要加上this. ， 如果是在标签上书写，则不需要设置this
params与query
-
params
params在传递参数的时候，需要组件上设置props:true属性，这样通过params传递的参数可以通过props进行接收，然后在请求接口数据的时候，传递需要的参数
书写格式
-
路由设置
router:[{ path:'路径', component: () => import(组件路径), props:true }]设置props有两个作用，作用一是解耦操作，作用二方便接收params传递的参数
-
要传递参数的组件
<button @click="$router.push({ params:{ id } })"></button>
-
组件接收传递的参数
const app = new Vue({ ....., props:{ id:{ type: [String,Number], required: true } } })在这里设置的参数是，必须传递的参数，
required： true必传参数
-
query
query在传递参数时，传递方式相同，不同的地址栏的参数问题，params传递的参数是不具体显示在地址栏中，并且它的值是不会保存的
接收值的方式
this.$route.query.id // 可以选择用变量进行接收
导航守卫
使用场景：
当页面上有很多路由，进行操作有些路由对应的网址，是需要登录以后，或者是处于某一种状态下，才能进行操作，这时如果进行访问，就需要进行阻止，或者是跳转处理。
-
导航守卫参数
参数一：
to参数，要跳到那一个路由，内部保存当前路由信息参数二：
from参数，是从哪一个路由跳过去的，内部存储是当前路由信息参数三：
next参数，参数表示下一个的意思，参数在使用的时候，以函数的方式进行调用，他代表的是，从from跳转到to带有那些信息，满足信息可以继续跳转，不满足跳转到其他页面。在使用时确保next必须调用一次。
书写格式
router.beforEach(to,from,next) {
console.log(to,from)
next()
}
- next里面可以书写的值，true条件是，如果路由跳转失败，执行next内部代码
// 可以书写对象，内部是要跳转的页面以及其他操作
next({
name:'login',
// 将本次的路由fullPath传递给登录页面
redirect: to.fullPath
})
- 导航守卫与meta结合使用
在路由的配置文件里面给路由信息里面配置meta选项，值是对象类型，里面的参数是requiresAuto为true，这样在直接访问次路由时，需要进行登录或者是其他的操作，如果这个属性设置给了父组件，那马下面的所有子路由全部都需要验证
router[{
path:'/',
component: () => import('路径')
meta: {
requiresAuto:true
}
}]
