vue-cli中使用vue-router实例

一、安装(npm)1、安装相关包

npm install npm              //更新npm到最新版

npm install -g cnpm --registry=https://registry.npm.taobao.org                //安装淘宝镜像

cnpm install vue            //安装vue

cnpm install webpack        //安装webpack

cnpm install -g vue-cli      //全局安装vue-cli```

2、切换到你想放置项目的目录

vue init webpack projectname //创建项目[projectname]

进入生成的[projectname]文件夹

cnpm install                //安装依赖

cnpm install vue-router      //安装vue-router```

3、修改配置

在src目录下找到main.js,在new Vue（）前添加如下代码

import VueRouter from 'vue-router' //引入vue-router

Vue.use(VueRouter)                //安装

4、定义路由

在添加的代码下开始定义路由，以下是一个完整的示例

import Vue from 'vue'

import App from './App'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

//引入组件

import Hello from 'components/Hello.vue'

import Sx from 'components/sx.vue'

import Sb from 'components/sb.vue'

import Ssr from 'components/ssr.vue'

import Ssx from 'components/ssx.vue'

const myRouter = new VueRouter({routes: [{path: "/",component: Hello}, {path: "/sx",component: Sx}, {path:'/sb',component:Sb},{path:'/ssr',component:Ssr},{path:'/ssx/:id',component:Ssx}]})

new Vue({el: '#app',template: '',components: {App,Hello,Sx,Sb,Ssr,Ssx},router: myRouter  })

5、在app.vue下添加相应路由标签

6、启动实时预览或者打包

cnpm run dev                //开发环境预览

cnpm run build              //打包到生产环境html css js

7、建议

1，建议看过vue官方的教程再查看本示例。

2，可以先不通过npm学习相关vue的内容，再逐步转换到npm方式上。

3，仔细看官方教程，vue:https://cn.vuejs.org/

4，代码块版本：地址