Vue全家桶：
（1）Vue基础
（2）VueRouter
（3）VueX
下面是一个路由示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../../inputfiles/vue.js"></script> <script src="../../inputfiles/vue-router.js"></script> </head> <body> <div id = 'app'> <!--路由入口--> <router-link to='/index'>首页</router-link> <router-link to='/home'>家园</router-link> <hr> <!--路由出口--> <router-view></router-view> </div> <script> const routes = [ { path:'/index', component:{ template:` <div> <h1>这是INDEX页面</h1> </div> ` } }, { path:'/home', component:{ template:` <div> <h1>这是home页面</h1> </div> ` } } ] const routerObject = new VueRouter({ routes:routes }) var vm = new Vue({ el:'#app', data:{}, router:routerObject }) </script> </body> </html>
1. Vue全家桶
Vue + VueRouter + VueX
2. VueRouter https://router.vuejs.org/zh/
基本使用
1. 必须导入vue-router.js文件
2. 要有VueRouter()实例
3. 要把VueRouter实例挂载到Vue实例中
4. 路由的入口
<router-link to='/index'>index页面</router-link>
5. 路由的出口
<router-view></router-view>
2. 路由的参数
1. path: '/user/:name' --> 匹配路由
$route.params.name --> 取值
2. /user/alex?age=9000 --> url中携带参数
$route.query.age --> 取出url的参数
3. 子路由
children:[ { path: '', component: { template: `...` } } ] <router-link to='info' append></router-link>
路由的第二种定义方式：path 也可以 写成：path = '/index/:name?age=10' name可以用来匹配 视图中的<router-link to = '/index/zsq'>赵世奇</router-link>,同时也可以带参数
使用方法：template:`<div>user{{$router.params.name}}</div>`
参数使用方法：<p>{{$router.query.age}}</p> #取到age的值
定义子路由
注意不要忘记加上append这个参数
3. vue-cli 进行vue开发的脚手架工具
1. 安装vue-cli 工具
npm install vue-cli -g --> 全局安装
vue init webpack 项目名 // 初始化一个vue项目
详细步骤：
# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project$ vue init webpack test //输入命令? Project name (test) test? Project name test? Project description (A Vue.js project) 测试项目? Project description 测试项目? Author lxx1024? Author lxx1024? Vue build standalone? Install vue-router? (Y/n) Y //安装路由? Install vue-router? Yes? Use ESLint to lint your code? (Y/n) n //Eslint验证,很严谨,所以选择n? Use ESLint to lint your code? No? Setup unit tests with Karma + Mocha? (Y/n) Y? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? (Y/n) Y? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "test". To get started: cd test npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack# 安装依赖，走你$ cd my-project'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
解决方法：
（1）npm cache clean --force # 强制清除缓存
（2）npm install --registry=https://registry.npm.taobao.org 安装淘宝镜像
（3）npm install webpack-dev-server -g 全局安装webpack开发服务包
（4）npm run dev # 运行程序