一、在组件化编码中,路由的使用方法
1. 在路由组件文件夹下定义路由组件
- 和定义普通组件步骤相同
2. 在router.js文件中定义路由匹配规则
- 首先引入第一步中定义好的组件
import Home from './views/Home.vue'
// 第二种引入方法,给 path 绑定组件时导入 ,有什么区别待查正,涉及赖加载
component: () => import(/* webpackChunkName: "search" */ './views/SearchUser.vue')
- 制定路由匹配规则
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
],
})
3. 注册路由
- 在vue实例中注册路由,如果使用vue-cli构建项目,这些工作都已经做好
4. 使用路由
- 定义路由切换的入口
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
- 设置路由切换的容器
<router-view></router-view>
<!-- 给容器指定特定显示的组件 -->
<router-view name="home"></router-view>
二.路由的一些特殊用法
1.路由嵌套
一个使用了路由的组件中如果还要使用路由,那么就需要使用路由嵌套,比如在根路由下有一个子路由 ‘/login’ , 就需要在 / 路由的匹配规则中加入 children 属性数组,其内容就是定义子路由匹配规则的对象。
children : [
{
path : 'login',
name : '',
component : '组件‘
},
]
2.路由重定向
路由重定向也是一条匹配规则,只是需要把 path 对应的 component 换成 redirect : ‘‘ 属性值是目标 path 路径
routes : [
{
path : '/',
redirect : '/home'
}
]
3.活动态的路由组件
当前所在的路由组件就是处在活动态,这个状态随路由组件的切换而改变,进入活动态的组件标签有一个 router-link-active 属性,非活动态的组件则没有,可以给这个属性赋一个特殊css样式
4.控制路由组件的回退
在Android应用程序的左上角通常会有一个回退箭头,在pc浏览器左上角同样有前进和回退的操作,如果想要把这种回退和前进操作放到应用程序本身里面,而不是用浏览器的回退按钮去操作,特别是在移动端的web应用就有这种需求,就可以使用以下方法:
// 回退按钮的单机事件绑定函数
@click = "$router.back()"
// 前进
this.$router.go(1)
5. 另外一些切换路由的方式
- this.$router.push(‘/home/news‘)
这种方式相当与使用 "router-link to=‘/home/news‘ " , 可以正常回退到上一个显示的组件。 - this.$router.replace(‘/home/news‘)
这种方式是把当前所在的组件路由干掉,替换成目标组件的路由,如果回退,不会回到上一次显示的组件
原文地址:https://www.cnblogs.com/peatechen/p/11013296.html
时间: 2024-11-03 20:26:58