Vue实现路由跳转和嵌套

Vue 实现路由跳转和嵌套 在 Vue 中实现路由跳转和嵌套是非常重要的，今天我们将介绍如何使用 Vue 实现路由跳转和嵌套。我们需要安装 Vue Router，使用以下命令安装：`cnpm i vue-router -D` ### 配置路由 在安装完成后，我们需要在 src 文件夹下创建一个 routers.js 文件，并在其中引入所需的组件，创建 routers 对象： ```javascript import Home from './components/home.vue' const routers = [ { path: '/home', name: 'home', component: Home }, { path: '/', component: Home } ] export default routers ``` 在上面的代码中，我们定义了两个路由，一个是 `/home`，另一个是 `/`。我们使用 `path` 配置了路由的路径，使用 `component` 配置了映射的组件。 ### 创建路由对象 在创建 routers 对象中，我们需要注意的是，`export default routers` 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证。 在 main.js 中，我们需要修改以下代码： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import routers from './routers' import App from './App' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: routers }) new Vue({ el: '#app', router, render: h => h(App) }) ``` 在上面的代码中，我们创建了一个路由对象，并将其模式设置为 `history`，这样可以使用 HTML5 history 模式，该模式下没有 `#` 前缀，而且可以使用 `pushState` 和 `replaceState` 来管理记录。 ### 嵌套路由 在这个实例中，我们为了加深项目层级，App.vue 只是作为一个存放组件的容器。在这个容器中，我们使用 `<router-view>` 渲染通过路由映射过来的组件，当路径更改时，`<router-view>` 中的内容也会发生更改。 我们可以在 routers.js 中添加 children 属性来实现嵌套路由： ```javascript import Home from './components/home.vue' import First from './components/children/first.vue' import Login from './components/children/login.vue' const routers = [ { path: '/', component: Home, children: [ { path: '/', component: Login } ] }, { path: '/home', name: 'home', component: Home, children: [ { path: '/', name: 'login', component: Login }, { path: 'first', name: 'first', component: First } ] } ] export default routers ``` 在上面的代码中，我们添加了 children 属性来实现嵌套路由。这样，我们就可以在一级路由中嵌套二级路由。 ### 使用 `<router-link>` 映射路由 在 Home.vue 中，我们可以使用 `<router-link>` 组件来映射路由： ```html <template> <div> <header> <router-link to="/login">登录</router-link> <router-link to="/first">首页</router-link> </header> </div> </template> ``` 在上面的代码中，我们使用 `<router-link>` 组件来映射路由，当我们点击导航菜单的时候，会跳转到对应的路由。 今天我们介绍了如何使用 Vue 实现路由跳转和嵌套。我们使用 Vue Router 创建路由对象，并使用 `<router-view>` 渲染通过路由映射过来的组件。我们还学习了如何使用嵌套路由和 `<router-link>` 组件来映射路由。