Vue Router基本使用

目录

一.yarn安装

二.基本页面配置

三.vue3中tag被废弃 ，使用v-slot实现

四.编程式跳转

---

一.yarn安装

yarn add vue-router@4

二.基本页面配置

// 1. 定义路由组件.=>index.js
// 也可以从其他文件导入
import { createRouter,createWebHashHistory } from "vue-router"
import Home from '../views/Home.vue'

// 2. 定义一些路由
const router = createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: [{
        path:'/',
        component:Home
    },
    {
        path:'/about',
        // 懒加载
        component:()=>import('../views/About.vue')
    }] // 路由数组
})
export default router

//3.在需要的地方放入=>html
//路由跳转
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
//路由视图
<router-view></router-view>

// 5. 创建并挂载根实例=>main.js
const app = Vue.createApp(App)
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

三.vue3中tag被废弃 ，使用v-slot实现

<router-link to="/home" v-slot="{btnhome}">
  <button @click="btnhome" >首页</button>
</router-link>
<router-link to="/about" v-slot="{btnabout}">
  <button @click="btnabout">关于</button>
</router-link>

四.编程式跳转

//1.添加触发按钮
<button @click="goHome">Home</button>
<button @click="goAbout">About</button>

//2.按需引入并使用
//返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。
import {useRouter} from 'vue-router'
const router = useRouter()

//3.使用router进行跳转
const goHome = ()=>{
	router.push('/')
 }
 const goAbout = ()=>{
	router.push('/about')
 }

五.query和params传参方式

1.发送传参

const yjj = ref(250)

const goAbout = ()=>{
	// params传参
	// router.push({
	// 	name:'About',
	// 	params:{
	// 		yjj:yjj.value
	// 	}
	// })
    // query传参
	router.push({
		path:'/about',
		query:{
			yjj:yjj.value
		}
	})
 }

2.在index中params需要站位

   //注：parmas不能与path一起使用
  {   
        name:'About',
        // path:'/about/:yjj',params
        path:'/about',
        // 懒加载
        component:()=>import('../views/About.vue')
    }

3.接收参数

//1.简单类型接收传参
import {useRoute} from 'vue-router' 
const route = useRoute()
// console.log(route.params);
//console.log(route.query);

//2.复杂类型接收传参
params:{
			num :yjj.age,
			obj:yjj.obj
		}
//把对象给拆开传