文章已同步至掘金：https://juejin.cn/post/6844903902148558855
欢迎访问😃，有任何问题都可留言评论哦~
基本路由
- 创建需要的组件
<template>
<div class="login">
Login组件
</div>
</template>
- 把组件导入(import)到
router.js中，然后在routers中设置匹配规则
import Login from "./views/Login.vue"
{
path: "/login",
name: "login",
component: Login,
}
- 在其他组件中使用
<router-view />用来放路由匹配的组件 - 使用
<router-link>通过点击实现匹配路由跳转
<template>
<div class="setting">
其他组件<br>
<router-link to="/setting/login">login页面</router-link>
<router-view></router-view>
</div>
</template>
嵌套路由
一般应用界面，通常由多层嵌套的组件组合而成，同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，所以要用到嵌套路由。
1.创建所需要的组件，下面是两个组件
<template>
<div class="login">
Login组件
</div>
</template>
<template>
<div class="register">
Register组件
</div>
</template>
2.把组件导入(import)到 router.js 中，然后在 routers 中设置匹配规则（你需要在哪个路由下用这两个路由页面，就把这两个路由的匹配规则写到那个路由的匹配规则下）例如：我要在setting组件下用这两个组件，如下
{
path: "/setting",
name: "setting",
component: Setting,
children: [
{
path: "/setting/login",
name: "login",
component: Login,
},{
path: "/setting/register",
name: "register",
component: Register,
}
]
}
3.在Setting组件中使用 <router-view /> 用来放路由匹配的组件
4.使用 <router-link> 通过点击实现匹配路由跳转
如下：
<template>
<div class="setting">
Setting组件<br>
<router-link to="/setting/login">登录页面</router-link><br>
<router-link to="/setting/register">注册页面</router-link><br>
<router-view></router-view>
</div>
</template>
注：要使用嵌套路由，一定要在 VueRouter 的参数中使用 children 配置
children 配置就是像 routes 配置一样的路由配置数组，所以呢，可以嵌套多层路由。
动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 Detail 组件，对于所有 ID 各不相同的内容，都要使用这个组件来渲染。如下：
1.创建所要使用的组件
// Detail组件
<template>
<div class="detail">
这是详情页面
<h1>{{this.$route.params.id}}</h1><br>
</div>
</template>
// 列表界面
<template>
<div class="list">
这是列表页面
<ul>
<li><router-link to="/detail/1">1号</router-link></li>
<li><router-link to="/detail/2">2号</router-link></li>
<li><router-link to="/detail/3">3号</router-link></li>
</ul>
</div>
</template>
2.把组件导入(import)到 router.js 中，然后在 routers 中设置匹配规则。如下：
{
path: "/list",
name: "list",
component: List,
},{
path: "/detail/:id",
name: "detail",
component: Detail,
}
注：动态路径参数 要以冒号(:)开头
3.在List组件中使用 <router-link> 通过点击实现匹配路由跳转
注：一定要带参数 如下：
<template>
<div class="list">
这是列表页面
<ul>
<li><router-link to="/detail/1">1号</router-link></li>
<li><router-link to="/detail/2">2号</router-link></li>
<li><router-link to="/detail/3">3号</router-link></li>
</ul>
</div>
</template>
4.在Detail组件中接收传递过来的数据
<template>
<div class="detail">
这是详情页面
<h1>{{this.$route.params.id}}</h1>
</div>
</template>
注：接收时一定要用this.$route.params.接收，后面加上参数
这样就能接收到传递过来的参数了
编程式路由
除了使用 router-link 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
注：在 Vue 实例内部，可以通过 router.push 方法直接跳转到指定页面
例如：我想在 Find组件 中跳到 setting组件 ，这时不使用 router-link ，那么我们就可以使用 this.$router.push 方法
由于这几个步骤都大致相同，我就不一一说了，直接说核心代码：
<template>
<div class="find">
Find组件
<button @click="f">去setting页面</button>
</div>
</template>
<script>
export default {
methods:{
f(){
this.$router.push("/setting")
}
}
}
</script>
如上述代码所示，在Find组件中直接设置一个按钮，绑定一个点击事件，然后直接调用push方法，就可以直接跳转到 /setting 页面
router.go(n)
这里再说一个方法 router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
如下代码：
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
在方法中一般使用 this.$router.go(n)
如下：都表示 返回
f(){
// this.$router.go(-1)
this.$router.back()
}
重定向
我们一般在开发时，首页都是用 index 来命名的，所以我们不可能在地址栏上输入 /index 来进入首页。
我们可以直接在默认情况下，进的就是 index 页面
这时就可以用到重定向
重定向也是通过 routes 配置来完成
如下代码：
routes: [
{
path: "/",
redirect:"/home"
}
]
上述代码说明，如果地址栏中使用 / ，或者 / 可以省略不写，这时就直接跳转到 home 页面。
匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
评论区