Vue3 routing configuration createRouter, createWebHistory, useRouter, useRoute

Table of contents

Manually configure the Vue-router environment:

Component internal jump routing, pass parameters useRouter, useRoute

---

Vue3 and Vue2 are basically similar, except that createRouter and createWebHistory need to be introduced from vue-router before use.

Manually configure the Vue-router environment:

1. Download package: npm i vue-router --save or npm i vue-router --S or use cdn to import

2. Create the js file of the route (routing, sub-routing, redirection, opening history mode)

      createRouter、createWebHistory

//路由文件
import { createRouter, createWebHistory } from 'vue-router'  //将createRouter、createWebHistory引入vue
const routes = [
  {
    path: '/',  //配置默认路由
    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', //重定向，进入/b路由时默认进入/b/son1
  	children:[ //配置子路由
  		{
  		path: '/b/son1', //子路由路径前边必须写父路由路径
  		name: 'bson1',
  		component: ()=>import("../views/b-son1.vue")	
  		}
  	]
  }
]
const router = createRouter({ //设置为history模式
  history: createWebHistory(),
  routes
})


export default router

3. Import the configured routing js file into 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之前调用

app.mount('#app')

4. Use the router-view tag to display routes in the interface

Component internal jump routing, pass parameters useRouter, useRoute

In vue3, you need to use the useRouter and useRoute methods to jump to the route inside the component

useRoute is equivalent to the previous this.$route jump route

usage:

<template>
	<h1>aaa</h1>
	<router-view></router-view>
	<button @click="fn">从a路由跳转到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写跳转的路由，同样可以传参
		}
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

useRouter is equivalent to this.$router accepting parameters (query, params)

Note: 1. Please note that params only work with name (routing name configured in the routing file) (path cannot be used)

        2. It can only be used in the setup function

usage

<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函数内部，是取不到传参的，返回undefined
		let route=useRoute()
		 console.log(route)
	}
	
</script>

<style scoped>
	h2{
		width: 200px;
	    height:100px;
		background-color:aliceblue;
	}
</style>

Combined with the former code for verification, we found the following situation

 When we jump to the page, we successfully obtained the passed parameter, but we cannot obtain it without using useRouter in the setup function