Router的学习一、简介二、使用项目初始化1、模版页面跳转2、路由嵌套一、简介Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视...

Router的学习

一、简介
二、使用
- 项目初始化
- 1、模版页面跳转
- 2、路由嵌套

一、简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
实际上用的最多的还是视图的跳转和拦截方面的操作

注：以下的项目案例都是下一个根据上一个案例继续进行的

二、使用

项目初始化

使用下列命令初始化项目

vue init webpack 1_router_use
为了更好的学习，所以不直接安装组件依赖，一步一步来 2. 删除components文件夹下的HelloWord.vue文件,并且删除App.vue中的多余标签，只留下图片中的样子，方便我们做案例 <template> <div id="app"> 主页面 </div> </template> <script> export default { name: 'App' } </script> <style> </style> 下载vue-router组件 npm install vue-router 在src下创建一个router的文件夹 1、模版页面跳转在components文件夹创建一个login.vue文件和list.vue <template> <div id="login"> 登录界面 </div> </template> <script> export default { name: 'login' } </script> <style> </style> <template> <div id="list"> 列表页面 </div> </template> <script> export default { name: 'list' } </script> <style> </style> 在router文件夹创建一个index.js，因为index命名的文件为默认文件，所以我们以它为router的配置文件 //配置Vue-Router //1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件 import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/login' import List from '../components/list' //2、安装路由 Vue.use(VueRouter); //3、导出路由给其它文件使用 export default new VueRouter({ routes:[ { //路径 path:'/login', //组件名称 name:'loginView', //跳转去到的组件 component:Login }, { path:'/list', name:'listView', component:List } ] }) 在src/main.js添加刚刚写router/index.js模块依赖 import Vue from 'vue' import App from './App' //1、添加刚刚写router/index.js模块依赖 import Router from './router/index' Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, template: '<App/>', router:Router//2、配置路由 }) 在主页面添加<router-link></router-link>和<router-view></router-view>标签 <template> <div id="app"> 主页面 <router-link to="/login">登录</router-link> <router-link to="/list">列表</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> </style> 总结路由跳转有四步：（1、）写好componet页面（2、）配置只好路由的index.js配置文件（3、）在页面对应的js文件中导入路由，并且配置路由（4、）在vue页面天啊及<router-link></router-link>和<router-view></router-view>标签 2、路由嵌套在components文件夹创建一个userMessage.vue文件updateUserMessage.vue <template> <div id="userMessage"> 个人用户信息展示页面 </div> </template> <script> export default { name: 'userMessage' } </script> <style> </style> <template> <div id="updateUserMessage"> 个人用户信息更新页面 </div> </template> <script> export default { name: 'updateUserMessage' } </script> <style> </style> 修改router/index.js文件，添加嵌套路由 //配置Vue-Router import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/login' import List from '../components/list' import UpdateUserMessage from '../components/updateUserMessage' import UserMessage from '../components/userMessage' Vue.use(VueRouter); export default new VueRouter({ routes:[ { path:'/login', name:'loginView', component:Login }, { path:'/list', name:'listView', component:List, //添加嵌套组件 children: [ //格式和之前的一样 { path: '/updateUserMessage', name: 'updateUserMessageView', component: UpdateUserMessage }, { path: '/userMessage', name: 'userMessageView', component: UserMessage } ] } ] }) 给要嵌套的组件添加<router-view></router-view>标签 <template> <div id="list"> 列表页面 <router-view></router-view> </div> </template> <script> export default { name: 'list' } </script> <style> </style> 总结: （1、）写好对应的子页面（2、）给router/index.js中需要嵌套的路由添加children属性（3、）给要嵌套的页面添加上要<router-view></router-view>标签