在 Vue 2 中，可以使用两种方式来编写路由：

1. 声明式路由

声明式路由是使用 和 组件来定义路由的。 组件用于创建导航链接，而 组件用于显示路由视图。

import Vue from 'vue';

import VueRouter from 'vue-router';

import Home from './components/Home.vue';

import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

];

const router = new VueRouter({

routes,

});

new Vue({

el: '#app',

router,

});

HTML

HTML

在这个示例中，我们定义了两个路由：/ 和 /about。/ 路由映射到 Home 组件，/about 路由映射到 About 组件。

2. 编程式路由

编程式路由是使用 Vue Router 的 API 来定义路由的。您可以使用 this.$router 实例来访问路由器，并使用它的方法来导航到不同的路由。

以下是一个简单的编程式路由示例：

JavaScript

// main.js

import VueRouter from 'vue-router';

import Home from './components/Home.vue';

import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

];

const router = new VueRouter({

routes,

});

new Vue({

el: '#app',

router,

mounted() {

this.$router.push('/about'); // 导航到 /about 路由

},

});

在这个示例中，我们使用 this.$router.push('/about') 方法来导航到 /about 路由。

路由参数

您可以使用动态路由段来捕获路由中的参数。例如，以下路由将捕获 id 参数：

JavaScript

{ path: '/user/:id', component: User }

在 User 组件中，您可以使用 this.$route.params.id 来访问 id 参数。

路由守卫

路由守卫可以用来在导航到路由之前或之后执行一些操作。例如，您可以使用路由守卫来验证用户是否已登录。

以下是一个简单的路由守卫示例：

JavaScript

router.beforeEach((to, from, next) => {

if (to.path === '/login' && this.$store.state.auth.loggedIn) {

next('/home');

} else if (to.path !== '/login' && !this.$store.state.auth.loggedIn) {

next('/login');

} else {

next();

}

});

在这个示例中，路由守卫将检查用户是否已登录。如果用户已登录，则将他们导航到 /home 路由。如果用户未登录，则将他们导航到 /login 路由。