文章已同步至掘金: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 页面。
匹配优先级
有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
评论区