首页
前端开发
Webpack
Vue CLI与Webpack构建网站详解(四)使用vue-router配置路由

Vue CLI与Webpack构建网站详解(四)使用vue-router配置路由

0 次浏览 0 条评论
pdf
pdf

vue-router 的路由系统，在 vue-cli 和 webpack 项目里还是挺好用的，是做 SPA 项目的时候。你要是前面已经搭好环境、引了 bootstrap、用了组件，这篇就刚刚好上手。

vue-router 的安装挺简单，命令行里进到项目根目录，跑一条命令就行：

cnpm install vue-router --save-dev

在src下面新建一个page文件夹，把你想跳转的页面组件都放进去，比如index.vue和list.vue。结构清晰，管理起来也方便。

接下来就是配置路由。新建个router.js文件，把路径和组件一一对应上，比如：

import Vue from 'vue';
import Router from 'vue-router';
import Index from './page/index.vue';
import List from './page/list.vue';


Vue.use(Router);


export default new Router({
  routes: [
    { path: '/', component: Index },
    { path: '/list', component: List }
  ]
});

在main.js里把router挂上去：

import router from './router';


new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

路由跳转也蛮简单，用标签就能搞定：

去列表页

嗯，基本流程就是这样，简单直白。页面之间跳来跳去也不卡，开发起来还挺顺手的。

如果你想多看看其他例子，可以翻翻这篇，还有vue-router 官方解析也值得一看。

如果你打算做多页面、复杂路由的项目，也可以看看这个多页面示例，结构上会更清晰些。

一句，如果你页面多、逻辑也复杂，记得把路由配置拆分下，会轻松不少。

pdf 文件大小：91.01KB