vue路由配置

vue做为当前流行的框架之一，其中路由配置也是难点以及重点：
一 ：首先是如何通过webpack创建一个vue项目：
vue的项目必须依赖node 以及webpack
node可以直接在官网下载：
打开命令cmd 输入 node -v 可以查看是否安装成功以及安装版本
全局安装webpack：$ npm install webpack -g
然后是通过node安装vue脚手架：

1. cmd打开命令行窗口
2. 输入cnpm install vue-cli -g，然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)
3. 安装结束后输入vue 如果显示版本号继续下一步操作
4. 运行vue init webpack demo(注：项目名称)回车
5. 显示Project nanme 目录名 回车 project description 后面可以写上描述，或者直接回车
   Author 后面可以写作者也可以回车
6. Install vue-router? 选择Y //是否使用vue路由
7. User ESLint to lint your code? 选Y //是否选择检测代码规范
8. Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9. Setup e2e tests with Nightwatch? 选n
10. cd>‘项目文件’ //找到vue项目文件
11. npm run dev //运行项目文件

二：接下来主要介绍vue路由的配置
import Vue from 'vue' //指向当前项目
import Router from 'vue-router' //引入vue路由
import HelloWorld from 'components/HelloWorld' //引入需要的组健
Vue.use(Router)

export default new Router({
     
  routes: [
    {
     
      path: ‘HelloWorld',//路径  一定要要在项目中build文件夹找到 webpack.base.cofing文件配置文件的路径 否则必须写相对路径
      name: 'HelloWorld', //名称
      component: HelloWorld  //组件名称
    }
  ]
})

webpack.base.cofing文件配置文件的路径
resolve: { HelloWorld: components/HelloWorld', //前面为项目中真实路径 后面为项目文件的相对路径 },

直接定义路由组件

constgoods = {
     template:'
goods
'};constratings = {template:'
ratings
'};constseller = {template:'
seller
'};

import引入路由组件
import goods from'components/goods/goods';
import ratings from'components/ratings/ratings';
impor tseller from'components/seller/seller';
// 然后定义路由(routes)，components还可以是Vue.extend()创建的
constroutes = [ {path:'/goods',component: goods }, {path:'/ratings',component: ratings }, {path:'/seller',component: seller }];

// 接着创建路由实例

constrouter =newVueRouter({
// ES6缩写语法，相当于routes:routesroutes 
 });

// 最后创建vue实例并挂载constapp =newVue({el:'#app', router});
// 或者constapp =newVue({ router}).$mount('#app')