快捷導(dǎo)航

Vue路由配置方法詳細(xì)介紹

更新時間：2022年09月24日 11:02:34 作者：-不要說話-

Vue3和Vue2基本差不多，只不過需要將createRouter、createWebHistory從vue-router中引入，再進(jìn)行使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

手動配置Vue-router環(huán)境

1、下載包： npm i vue-router --save或者 npm i vue-router --S 或者用cdn引入

2、創(chuàng)建路由的js文件（路由、子路由、重定向、開啟history模式）

createRouter、createWebHistory

//路由文件
import { createRouter, createWebHistory } from 'vue-router'  //將createRouter、createWebHistory引入vue
const routes = [
  {
    path: '/',  //配置默認(rèn)路由
    name: 'home', //路由名
    component: () => import("../views/home.vue"), //引入該路由使用的組件
  },
  {
    path: '/a',
    name: 'a',
    component: () => import('../views/a.vue'),
	redirect: '/a/son1',
	children:[ //配置子路由
		{
		path: '/a/son1', //子路由路徑前邊必須寫父路由路徑
		name: 'ason1',
		component: ()=>import("../views/a-son1.vue")	
		}
	]
  },
  {
    path: '/b',
    name: 'b',
    component: () => import('../views/b.vue'),
  	redirect: '/b/son1', //重定向，進(jìn)入/b路由時默認(rèn)進(jìn)入/b/son1
  	children:[ //配置子路由
  		{
  		path: '/b/son1', //子路由路徑前邊必須寫父路由路徑
  		name: 'bson1',
  		component: ()=>import("../views/b-son1.vue")	
  		}
  	]
  }
]
const router = createRouter({ //設(shè)置為history模式
  history: createWebHistory(),
  routes
})
export default router

3、將配置的路由js文件引入到main.js中

import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
import router from "./router/index.js" //引入配置路由文件
app.use(router)//記得在mount之前調(diào)用
app.mount('#app')

4、界面中使用router-view標(biāo)簽顯示路由

組件內(nèi)部跳轉(zhuǎn)路由與傳參useRouter,useRoute

vue3中，在組件內(nèi)部跳轉(zhuǎn)路由需要使用useRouter,useRoute方法

useRoute相當(dāng)于以前的this.$route 跳轉(zhuǎn)路由

用法：

<template>
	<h1>aaa</h1>
	<router-view></router-view>
	<button @click="fn">從a路由跳轉(zhuǎn)到b路由</button>
</template>
<script setup>
	import {useRouter} from "vue-router"
	    let router=useRouter() //接收useRouter方法，在vue2中是直接使用router即可
		let fn=()=>{
			router.push({path:"/b",query:{name:"小獅子"}}) //path寫跳轉(zhuǎn)的路由，同樣可以傳參
		}
</script>
<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

useRouter相當(dāng)于this.$router 接受傳參（query、params）

注意：

1、請注意params只與name（路由文件里配置的路由name）搭配生效（不能使用path）

2、只能在setup函數(shù)內(nèi)使用

用法

<template>
	<h2>這是b-son1</h2>
	<button @click="fn">lookquery</button>
</template>
<script setup>
	import {useRoute} from "vue-router" //引入
	let route=useRoute()
	 console.log(route.query)//如果是params傳參就用route.params接收
let fn=()=>{  //這不是setup函數(shù)內(nèi)部，是取不到傳參的，返回undefined
		let route=useRoute()
		 console.log(route)
	}
</script>
<style scoped>
	h2{
		width: 200px;
	    height:100px;
		background-color:aliceblue;
	}
</style>

結(jié)合前者代碼進(jìn)行驗(yàn)證，發(fā)現(xiàn)下圖狀況