本文共 1170 字，大约阅读时间需要 3 分钟。

Vue Router简介

Vue Router是Vue.js官方推荐的路由管理器，类似于传统Java后台的Controller功能，专门用于处理路由映射和请求管理。它与Vue.js核心深度集成，极大简化了单页应用的构建流程。以下是Vue Router的主要功能：

• 支持嵌套路由和视图表
• 基于组件的模块化路由配置
• 支持路由参数、查询和通配符
• 集成Vue.js过渡系统，提供视图过渡效果
• 提供细粒度的导航控制
• 支持带有自动激活CSS类的链接
• 支持HTML5历史模式或Hash模式（IE9下降级处理）
• 可自定义滚动行为

安装Vue Router

安装Vue Router需要使用npm或cnpm。建议使用Vue CLI进行项目开发，这样可以自动管理依赖项。进入项目目录，运行以下命令：

npm install vue-router --save-dev

如果是模块化项目，需要手动安装路由功能。例如，在主文件中添加：

import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);

快速上手

1. 创建组件文件（如Content.vue和Main.vue），分别定义不同路由对应的组件内容

2. 在src/router目录下创建一个index.js文件，配置路由

import Vue from 'vue';import Router from 'vue-router';import Content from '../components/Content';import Main from '../components/Main';

Vue.use(Router);

export default new Router({

routes: [

{path: '/content', name: 'content', component: Content},

{path: '/main', name: 'main', component: Main},

]

)

3. 在main.js中整合路由配置

import Vue from 'vue';import App from './App';import router from './router';

Vue.config.productionTip = false;

new Vue({

el: '#app',

router,

components: { App },

template: ' '

4. 在App.vue中应用路由

template中使用router-link和router-view标签：

转载地址：http://vqux.baihongyu.com/