介绍
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
一、安装
直接下载 / CDN
https://unpkg.com/vue-router@4
npm安装
npm install vue-router@4
开发版本构建
如果你想使用最新的开发版本,你需要直接从 GitHub 上克隆并自己构建 vue-router。
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
二、使用方法
新建router模块
在src目录下创建一个router目录,里面再创建一个index.js/index.ts文件,这个目录就是router模块
import { createRouter, createWebHashHistory } from "vue-router";
const routers = [
{
path: '/',
component: () => import('../views/Index/Index.vue')
},
{
path: '/login',
component: () => import('../views/Login/Login.vue')
}
]
export const router = createRouter({
history: createWebHashHistory(),
routes: routers
})
export default router
挂载路由
在main.js/main.ts文件添加router
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index'
const app = createApp(App);
app.use(router);
app.mount('#app')
然后在App.vue文件中使用router-view将组件或页面渲染到这里
<template>
<router-view></router-view>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
components: {
},
})
export default class App extends Vue {}
</script>
<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>
最后在用到路由的组件通过router-view组件或者router-link跳转
<script lang="ts">
</script>
<template>
<van-button type="primary">首页</van-button>
<router-link to="/login">
<van-button type="success">登录</van-button>
</router-link>
</template>
使用@别名作为根目录
在vite.config.ts文件中引入path并配置
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
// https://vitejs.dev/config/
const root = process.cwd()
function pathResolve(dir: string) {
return resolve(root, '.', dir);
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
resolves: [VantResolve()],
}),
],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
alias: [
{
find: /\@\//,
replacement: `${pathResolve('src')}/`
}
]
},
server: {
// host: '192.168.0.221',
}
})
然后就可以在相应的地方使用啦,如:router配置文件中
import { createRouter, createWebHashHistory } from "vue-router";
const routers = [
{
path: '/',
component: () => import('@/views/Index/Index.vue')
},
{
path: '/login',
component: () => import('@/views/Login/Login.vue')
},
{
path: '/users/:id',
component: () => import('@/views/Users/Users.vue')
}
]
export const router = createRouter({
history: createWebHashHistory(),
routes: routers
})
export default router
动态路由匹配
const routers = [
{
// 动态字段以冒号开始
path: '/users/:id',
component: () => import('../views/Users/Users.vue')
},
]
<template>
<h3>User ID :{{$route.params.id}}</h3>
</template>
<script>
export default {
name: "Users"
}
</script>
<style scoped>
</style>