一、路由部分

  使用vue-router处理链接跳转,在vue-cli 构建的项目中默认安装,在生成的模板已经配置好了,如图:
这里写图片描述

  配置好之后,就可以在页面中使用了,常用的<a href=''></a>标签。vue-router提供了<router-link to=''></router-link>,提供当然就有它的好处,参考文档
 1.兼容性,无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致。
 2. 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
 3.当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了
处理路由跳转后,就需要显示跳转的内容,使用<router-view></router-view>

路由书写:
		export default new Router({
			routes: [
		  	{
			  	path:'/',
		  		redirect:'/login',
		  	},
		    {
		      path:'/login',
		      name:'login',
		      component:Login
		    },
		    {
		      path: '/start',
		      redirect:'/start/index',
		      name: 'start',
		      component:Start,
		      children:[
		        {
		          path:'index',
		          name:'index',
		          components:{
			          index:Index,
			          info:ContListInfo,
			          handle:ContListHandle
		          }
		        }
		      ]
	    }]
	})

这个路由规则四个意思:1、默认路由跳转,redirect。2、路由跳转匹配,‘/login’,匹配组件component:Login。3、子路由设置,children:[ …],要默认显示某个子路由,redirect地址。4、默认视图显示or命名式,<router-view name='info'></router-view>,没有name<router-view></router-view>属性时显示默认视图,有name值时显示对应的组件。

其他路由规则

1、动态路由匹配,显示同一个组件,以url地址传递ID or name展示不同的数据。在路由规则中path:’/login/:id’,‘:’表示动态匹配,比如:‘/login/1’、‘/login/user’。如果不涉及复杂的页面逻辑以及不要求在url地址中显示当前的操作,可采用父子组件数据 传递来更改视图显示
2、路由重定向,使用redirect ,指定路由地址‘/login’,或者命名的路由name,redirect:{name:‘login’};路由别名,按找时机路由渲染,url地址是自己定义的,比如跳转到‘/login’,路由规则加属性 alias:’/api/login’。仅仅是展示用。
3、

路由实例

在vue实例中访问路由的实例,this.$router
1、通过编码实现路由跳转,this.$router.push();如登录操作

//字符串
this.$router.push('home'); ‘/home’
//对象
const userId=123;
this.$router.push({ name: 'user', params: { userId }}); ‘/user/123’
this.$router.push({ path:user/KaTeX parse error: Expected 'EOF', got '}' at position 10: {userId}`}̲)` '…router.replace().替换掉历史记录,不会添加 3、this.$router.go() `在历史记录中前进或者后退多少布

路由对象属性:

对象参数描述
this.$router
.path获取当前的路由地址
.paramskey/value 对象 路由参数
.querykey/value对象,查询参数,比如‘/user?id=1’,this.$router.query.id=1
.name当前路由的名称
Logo

前往低代码交流专区

更多推荐