1.安装路由插件
npm install vue-router@next -S
2.建一个router/index.js
/从vue-router按需导入两个方法
//createRouter用于创建路由实例对象
//createwebHashHistory用于指定路由的工作模式
import { createWebHashHistory,createRouter} from 'vue-router'
import Computed from "../components/computend.vue"
import Ref from "../components/ref.vue"
const router = createRouter({
//指定路由的工作模式
history: createWebHashHistory(),
routes:[
{path:'/computed',component:Computed},
{path:'/ref',component:Ref}
]
})
export default router
3.
第一种跳转
<router-link to="/computed">computend</router-link>|
<router-link to="/ref">ref</router-link>
<router-view></router-view>
第二种跳转(编程式)
按需引入是useRouter
接收参数的时候是useRoute
<button @click="tz">跳转</button> //1
import {useRouter} from "vue-router" //2
export default {
name: 'App',
setup() {
const router=useRouter() //3
function tz(){ //4
router.push({
path:"/ref"
})
}
return {
list, car,tz
}
},
}
4.传参
function tz(){
router.push({
path:"/ref",
query:{
name: "大哥",
age: 12
}
})
}
接收 (useRouter)
import {useRoute} from "vue-router"
const route = useRoute()
console.log(route.query);