路由vue-route的使用示例教程

{
	  path: '/',
	  name: 'index',
	  component: () => import('../views/IndexView.vue') 
},

<template>
  <router-view/>
</template>

<router-link to="/login"></router-link>
<router-link :to="{path:'/login'}"></router-link>

<button @click="$router.push('/login')">登录按钮</button>
<button @click="$router.push({path:'/login'})">登录按钮</button>
<button @click="$router.push({name:'login'})">登录按钮</button>

<button @click="loginBtn">登录按钮</button>

<script>
	export default{
		methods:{
			loginBtn(){
				this.$router.push('/login')
			}
		}
	}
</script>

{
	  path: '/project',
	  name:'project',
	  // 路由重定向配置
	  redirect:{
		  name:'login',
		  }
},

{
      path: '/home',
      name: 'home',
      component: () => import('../views/HomeView.vue'),
	  // 配置home下面的且套路由
	  children:[
		  {
			  path:'/home/project',
			  name:'project',
			  component:()=>import('../views/ProjectView.vue')
		  },
		  {
			  path:'/home/interface',
			  name:'interface',
			  component:()=>import('../views/InterfaceView.vue')
		  },
		  {
			path:'/home/report',
			name:'report',
			component:()=>import('../views/ReportView.vue')
		  }]
},

<template>
	<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
	  <el-menu-item index="1" @click="$router.push({name:'project'})">项目信息</el-menu-item>
	  <el-menu-item index="2" @click="$router.push({name:'interface'})">接口信息</el-menu-item>
	  <el-menu-item index="3" @click="$router.push({name:'report'})">测试报告</el-menu-item>
	</el-menu>
	<!-- home中嵌套路由的渲染位置（路由出口） -->
	<router-view/>
</template>

<script>
</script>

<style>
</style>

{
		path:'/user/:id',
		name:'user',
		component: () => import('../views/UserView.vue')
},

<template>
	<h1>User页面</h1>
	<!-- 获取路由的路径参数 -->
	<h3>路由中匹配的id：{{$route.params.id}}</h3>

</template>

<script>
</script>

<style>
</style>

<template>
	<h1>User页面</h1>
	<!-- 获取路由的查询参数 -->
	<h4>查询参数name：{{$route.query.name}}</h4>

</template>

<script>
</script>

<style>
</style>

<router-link :to="{name:'user',params:{id:888},query:{name:111}}">user页面</router-link>
<button @click="$router.push({name:'user',params:{id:666},query:{name:222}})">user按钮</button>	

router.beforeEach(async (to, from) => {
	/*
	1、判断用户是否登录
		1.1从本地获取用户身份信息（存储在cookie或者localstroge中的token，session）
		window.cookieStore.get('token')
		window.localStorage.getItem('token')
		window.sessionStore.getItem('token')
		1.2验证token是否有效
		*/
	   // const isAuthenticated=true
	   // if (
	   //     // 检查用户是否已登录
	   //     !isAuthenticated &&
	   //     // ❗️ 避免无限重定向
	   //     to.name !== 'Login'
	   //   ) {
	   //     // 将用户重定向到登录页面
	   //     return { name: 'Login' }
	   //   }
	   // })
 })