Vue Router的使用步骤

1.安装 Vue Router

首先通过npm或yarn安装vue-router作为项目的依赖

npm install vue-router
 或者
yarn add vue-router

2.引入并配置 Vue Router

通常在main.js(vue2)或main.js/main.ts(vue3)文件中

// 引入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用 Vue Router 插件
Vue.use(VueRouter)

// 定义路由组件
import Home from './views/Home.vue'
import About from './views/About.vue'

// 定义路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({
  routes, // 等同于 routes: routes
 mode: 'history' // 可选，启用 HTML5 History 模式，去除 URL 中的 #
})

// 创建和挂载根实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

也可以将路由配置从 main.js 中提取到单独的文件中,在项目中创建 router.js,并在该文件中定义路由配置。随后在 main.js 中，导入router.js.如下:

//router.js
 
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue'; // 关于页面组件

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  //...
];

// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 根据需要设置路由模式
  routes
});

export default router; // 导出路由实例

//main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由实例

new Vue({
  router, // 使用路由实例
  render: h => h(App)
}).$mount('#app');

3.使用 <router-link> 和 <router-view>

• <router-link> 用于创建导航链接，点击后会激活对应的路由。
• <router-view> 是一个特殊的Vue组件，它将显示与当前路由匹配的组件内容。

<!--组件模板中-->
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>

<!-- App.vue或主布局组件中 -->
<router-view></router-view>

嵌套路由

嵌套路由允许在一个路由的子路径上嵌套其他的路由。你可以在路由配置的 children 数组中定义嵌套的路由。

const routes = [
  {
   path: '/user',
   component: UserLayout,
   children: [
    {
       path: 'profile',
      component: UserProfile
    },
     {
       path: 'settings',
       component: UserSettings
      }
   ]
  }
]

路由参数与查询参数

• 路由参数：动态路由部分，如 /user/:id，可以通过 $route.params.id 访问。

• 查询参数：URL 中的 ?key=value 形式，可以通过 $route.query.key 访问。

路由守卫

Vue Router 提供了导航守卫（navigation guards），可以在路由跳转前后执行一些逻辑，比如权限检查、数据预加载等。

// 全局前置守卫
router.beforeEach((to, from, next) => {
 // 在路由切换前执行的逻辑
  next(); // 确保导航继续进行
});