vue3路由代码示例

路由简单分三步吧

第一定义路由：包括访问地址，对应组件

第二使用：在index.html中使用它

下面是代码示例：

components/Person.vue

<template><router-link to="/test/hello">跳转</router-link><!-- 跳转子路由 --><router-view/><div class="ttt">
<!-- 		<button @click="consoleName">测试一下</button>--><h2>{{age}}</h2><button @click="addAge">年龄+1</button><h2>{{age2}}</h2> 
<!-- 		<li v-for="data in reactive2" :key="data.name">{{data.name}}</li><h2>{{reactive3.name}}</h2><h2>{{reactive4.a.b.c.d}}</h2> --><button @click="updateReactive2">更新数据</button>
<!-- 		<h2>{{objectRef.two}}</h2> -->
<!-- 		<h2>{{score}}</h2><h2>{{name}}</h2><h2>{{refObj}}</h2><h2>toRefid:{{toRefId}}</h2> --><h2>{{fullName}}</h2><h2>{{name3}}</h2><h2>refObj:{{refObj}}</h2><h2>reactive3:{{reactive3}}</h2><button @click="test">测试一下</button><h2>{{reactive5}}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeCar">修改整个车</button></div>
</template><script setup lang="ts" name="testName">import {ref} from 'vue'import {reactive} from 'vue'import {toRefs} from 'vue'import {toRef} from 'vue'import {computed} from 'vue'import {watch} from 'vue'let age2 = 1const obj = {one:Number,two:Number}let objectRef = ref<obj>({one:1,two:2})let reactive4 = reactive({a:{b:{c:{d:233}}}})let reactive3 = reactive({id:1,name:'13123132测试数据'})let reactive2 = reactive([{name:'测试1'},{name:'测试2'},])let student = reactive({id:1,score:25,name:'数学'})let {score,name} = toRefs(student);let toRefId = toRef(student,'id');let refObj = ref([{id:1,name:'ref对象'},{id:2,name:'测试咯'}])function updateReactive2(){reactive2[0].name = "更新数据"reactive4.a.b.c.d = 6666objectRef.value.two = 6score.value = 99// refObj.value[1].name = '更新的数据'refObj.value = {id:3,name:'测试一下'}reactive3.name= "reactive3更新数据"toRefId.value = 2 +1fullName.value = "啦啦啦啦啦"}// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况五：监视上述的多个数据watch([()=>person.name,()=>person.car],(newValue,oldValue)=>{debuggerconsole.log('person.car变化了',newValue,oldValue)},{deep:true})let reactive5 = reactive({id:1,name:{xing:'wang',ming:'sansan'}})function test(){reactive5.name = {xing:'2',ming:'测试'}}const reactiveWatch = watch(reactive3,(newValue,oldValue)=>{console.log("reactive对象值变化",newValue,oldValue)})watch([()=>reactive5.id,reactive5.name],(newValue,oldValue)=>{console.log("reactive5对象多属性变化",newValue,oldValue)},{deep:true})watch(refObj,(newValue,oldValue)=>{console.log("ref对象变化",newValue,oldValue)},{deep:true})watch(reactive3,(newValue,oldValue)=>{console.log("reactive对象变化",newValue,oldValue)})let age = ref(1)function addAge(){age.value = age.value + 1 age2 += 1refObj.value.name= 6666}const swatch = watch(age,(newValue,oldValue)=>{console.log("ref变量值变化"+newValue+oldValue)if(newValue>5){swatch()}})let name3 = ref('李莉莉')let fullName = computed({get(){return name3},set(value){console.log("赋值方法")name3.value = value}})</script><style>.ttt{color:red}
</style>

router/index.js:定义路由地址和映射组件

import testName from '../components/Person.vue'
import HelloWorld from '../components/HelloWorld.vue'import {createRouter,createWebHistory} from 'vue-router'const router = createRouter({history:createWebHistory(),routes:[{path:'/test',component:testName//在这个路由界面上补上router-link,以及routerView就可以跳转子路由children:[{path:'/test/hello',//子路由：路径要完整component:HelloWorld}]}]
})export default router

main.ts：把组件绑定到标签id上

// 映入createApp用于创建应用
import { createApp } from "vue"// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'// 创建根组件应用
const app = createApp(App);
// 使用路由器
app.use(router)
// 将整个应用挂在到id为app的容器上
app.mount('#app')

App.vue：使用路由要注意，routerlink和router-view是必须有的，后者是组件显示位置

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import VueTwo from './components/vue2.vue'
import Person from './components/Person.vue'
import HelloWorld from './components/HelloWorld.vue'</script><template>
<!-- 	<VueTwo/> -->
<!-- 	<Person/>-->
<!--  <img alt="Vue logo" src="./assets/logo.png" /> -->
<!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
<router-link to="/test">测试</router-link>
<router-view/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>