vue路由 router基本使用方法

萨达大

已于 2022-05-31 19:00:46 修改

阅读量254

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript

于 2021-11-04 19:39:03 首次发布

本文链接：https://blog.csdn.net/weixin_51169222/article/details/121149355

版权

Vue Router 动态路径导航守卫编程式导航组件传参

关键词由CSDN通过智能技术生成

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

router的基本使用

<!-- 
	router-link是vue中提供的标签，默认会被渲染为a标签
	to属性默认会被渲染为href属性 
-->
<router-link to="/user"></router-link>

<!-- 路由占位符 模板的内容显示在这里-->
<router-view></router-view>

代码样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
				router-link是vue中提供的标签，默认会被渲染为a标签
				to属性默认会被渲染为href属性 
			-->
			<router-link to="/user/1">user1</router-link>
            <router-link to="/user/2">user2</router-link>
            <router-link to="/user/3">user3</router-link>
			<router-link to="/register">register</router-link>
			
			<!-- 路由占位符 模板的内容显示在这里-->
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//定义组件
		const user={
            props:['id','uname','age'],//使用props接收路由参数
			//template:'<h1>User 组件   用户id为{{$route.params.id}}</h1>'
            template:`<div>
                <h1>User 组件   用户id为{{id}} 姓名：{{uname}}  年龄：{{age}}</h1>
                <button @click='goregister'> 点击跳转到register界面</button>
                </div>
            `,
            methods: {
                goregister(){
                    this.$router.push('/register');//编程式导航 跳转到hash值为register的页面
                }
            },
		}
		const register={
			template:`
				<div>
					<h1>register 组件</h1><br>
					<!-- 子路由链接 -->
					<router-link to="/register/tab1">tab1 </router-link>
					<router-link to="/register/tab2">tab2</router-link>
					<!-- 子路由占位符 -->
					<router-view></router-view>
                    <br>
                    <button @click='gouser'> 退回到user界面</button>
				</div>
			`,
            methods:{
                gouser(){
                    this.$router.go(-1);//参数为0 为刷新页面 -1上一步  1下一步
                }
            }
		}
		const tab1={
			template:'<h3>tab1的子组件</h3>',
		}
		const tab2={
			template:'<h3>tab2的子组件</h3>',
		}
		//创建路由实例对象
		const router =new VueRouter({
			//所有的路由规则都是一个配置对象，其中至少包含path和component属性
			//path表示当前路由的匹配的hash地址
			//component 表示当前路由对应要展示的组件
			routes:[
				//路由重定向 path表示需要被重定向的原地址，/代表根目录 redirect表示将要被重定向的地址
				{path :'/',redirect:'/user'},
                //动态路径参数 以冒号开头
                //props为true的话 params将会被设置为组件属性
				//{path:'/user/:id',component:user,props:true},

                {path:'/user/:id',component:user,props:route =>({age:20,uname:'张三',id:route.params.id})},//传参数

				//children表示子路由规则
				{path:'/register',component:register,children:[
					{path:'/register/tab1',component:tab1},//子路由要么写全 
					{path:'/register/tab2',component:tab2}//要么不写斜杆（/）
				]}
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			//挂载路由对象
			router:router
		})
	</script>
</html>

路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URl访问特定页面，需要重新导航到登录页面。

//为路由对象添加beforeEach导航守卫
router.beforeEach((to,from.next)=>{
	//如果用户访问的是登录页，直接放行
	if(to.path==='/login') return next()
	//从sessionStrorage中获取到保存的token值
	const tokenStr=Window.sessionStorage.getItem('token')
	//没有token就强制跳转到登录页
	id(!tokenStr) return next('login')
	next()
})

//Window.sessionStorage.clear()  清除token 做退出功能的时候能用上

萨达大

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由 router基本使用方法

router的基本使用<router-link to="/user"></router-link><router-view></router-view>代码样例：<!DOCTYPE html><html> <head
复制链接

扫一扫