vue-router4.0的基本使用
2021年10月8日大约 1 分钟
一，安装
npm install vue-router@4二，基本用法
2.1 在项目中新建router/index.js
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import User from '@/components/User.vue'
import NotFound from '@/components/NotFound.vue'
//定义一些路由
//每个路由都需要映射到一份组件
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/users/:id', component: User}
]
//创建路由实例并传递routes配置
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
export default router2.2 挂载到main.js上
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')2.3 在组件中使用
<template>
<div>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-link to="/users/johnny">Go to johnny</router-link>
<router-link to="/users/jolyne">Go to jolyne</router-link>
<router-view/>
</div>
</template>三，路由的访问
通过app.use(router),我们可以在任意组件中以this.$router 的形式访问它。并且以 this.$route 的形式访问当前路由。
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username //访问当前路由带的参数
},
},
methods: {
goToDashboard() {
if (isAuthenticated) {
this.$router.push('/dashboard')
} else {
this.$router.push('/login')
}
},
},
}要在setup函数中访问路由，我们则需要调用useRouter 或 useRoute
<template>
<div>
user
</div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import {watch} from 'vue'
const router = useRouter()
const route = useRoute()
watch(()=>route.params,(toParams,previousParams)=>{
console.log(toParams)
console.log(previousParams)
})
</script>更多关于在组合式 API中使用vue-router请参考官网