Vue Router简介

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

安装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/

你可能感兴趣的文章