快捷導航

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

更新時間：2022年12月22日 12:03:38 作者：敲代碼敲到頭發(fā)茂密

這篇文章主要介紹了路由vue-route的使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、項目初始化

二、路由配置規(guī)則

path：配置路由訪問的路徑
name：給路由起名字（命名路由）
component：訪問路由時，渲染的組件

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

App.vue

vue-route標簽作用：路由匹配到的組件將渲染到這里

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

router-link標簽作用：路由導航（路由跳轉(zhuǎn)的鏈接）

三、聲明式導航和編程式導航

聲明式導航

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

編程式導航

推薦使用路由的名字進行跳轉(zhuǎn)，不推薦直接寫路徑

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

$router:路由對象
在app.use(router)在注冊路由時，會給app設(shè)置全局屬性$router

<button @click="loginBtn">登錄按鈕</button>

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

通過調(diào)用app.use(router),我們可以在任意組件中以this.$router的形式訪問它，并且以this.$router的形式訪問當前路由

四、路由重定向

當訪問http://localhost:8080/#/project這個路由
會跳轉(zhuǎn)到http://localhost:8080/#/login這個路由

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

五、嵌套路由

index.js：路由配置

{
      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')
		  }]
},

HomeView.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>

特別注意

把不變的內(nèi)容寫到父路由中，并且父路由中預留路由展示位。將變化的內(nèi)容寫到子路由中

總結(jié)

六、路由參數(shù)動態(tài)匹配

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

訪問路由：http://localhost:8080/#/user/666

UserView.vue組件

獲取路由的路徑參數(shù)

<template>
	<h1>User頁面</h1>
	<!-- 獲取路由的路徑參數(shù) -->
	<h3>路由中匹配的id：{{$route.params.id}}</h3>

</template>

<script>
</script>

<style>
</style>

獲取路由的查詢參數(shù)

http://localhost:8080/#/user/666?name=kobe

<template>
	<h1>User頁面</h1>
	<!-- 獲取路由的查詢參數(shù) -->
	<h4>查詢參數(shù)name：{{$route.query.name}}</h4>

</template>

<script>
</script>

<style>
</style>

特別注意

$router和$route的區(qū)別：
$router：路由管理器對象，一般用于路由跳轉(zhuǎn)
$route：表示當前訪問的路由，用來獲取當前路由參數(shù)的一些信息

七、導航跳轉(zhuǎn)時傳遞路由參數(shù)

<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>

八、路由導航守衛(wèi)

設(shè)置路由導航守衛(wèi)（控制前端的路由訪問權(quán)限）

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' }
	   //   }
	   // })
 })

到此這篇關(guān)于路由vue-route的使用的文章就介紹到這了,更多相關(guān)路由vue-route使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: