Vue：vue-router(路由)
引言
一、Vue(全家桶) vue + vue-router + vuex
vue+vue-router： 主要来做 SPA（Single Page Application） 单页面应用
vue-router是vue的核心插件
二、为什么使用单页面应用？
（1）传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象（就像Django（前后端未分离），直接把请求获得的数据放到模板文件里，这样数据在一开始一股脑全部需要渲染），
（2）让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验（当加载前端页面时，只是加载了一个路由组件，而组件的内部是有一些生命周期的钩子函数，我们可以在created或者mounted阶段访问ajax获取数据，这样所有的数据就不会一股脑的一起渲染）
vue-router介绍
一、介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
-
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
（注意：vue-router依赖的vue的版本，可以看官网）
版本说明：对于 TypeScript 用户来说，vue-router@3.0+ 依赖 vue@2.5+，反之亦然。
二、环境准备
（1）下载好相应版本的vue
（2）下载好相应版本的vue-router（可以用CDN资源）
三、vue-router的使用（官方文档）
四、vue-router的使用
<div id="app"></div> <!--1.引入vue和vue-router文件--> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> ----------------------------------------------------------------------------------------------------------------------- // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // ====>解释：模块化机制编程，那么就会是局部作用域，只在当前文件中使用；那么这时候Vue和VueRouter也会是局部的 // 要调用 Vue.use(VueRouter) 相当于Vue.proptotype.$VueRouter = VueRouter (注意：加$都是vue的内部属性方法) // 也就是把VueRouter（vue-router提供的） 挂载到vue的原型（也就是vue的父类中） // 那么vue的父类有了$VueRouter的属性，那么继承vue的文件都是可以继承到这个属性的（直接this.$VueRouter就可以获得） --------------------------------------------------------------------------------------------------------------------------- // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { data(){ return {} }, template: '<div>foo</div>' }; const Bar = { data(){ return {} }, template: '<div>bar</div>' }; // 2. 定义路由规则 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/', redirect: '/foo' //重定向 }, { path: '/foo', //路由 component: Foo //路由对应的组件 }, { path: '/bar', component: Bar } ]; // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 （ // （一般开发的单页应用的URL都会带有#号的hash模式， // 因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。如果因为业务需要，或者单纯是觉得带#号不美观，那么可以使用history模式）） const router = new VueRouter({ mode:'history', //此模式需要和Linux配合，使用本地file协议查看是有问题的 routes // (缩写) 相当于 routes: routes }); ---------------------------------------------------------------------------------- // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 let App = { data(){ return{ } }, router, //相当于router:router，以后使用的时候可以直接 $.router // 使用 router-link 组件来导航.（router-link、router-view：vue-router的全局组件） // 通过传入 \`to\` 属性指定链接,相当于href属性 // <router-link> 默认会被渲染成一个 \`<a>\` 标签 // router-view是路由组件的出口（也就是点击router-link的值寻找到对应路由的组件，把组件内容渲染到router-view这里） template:` <div> <div class="header"> 应用渲染 <router-link to="/foo">首页</router-link> <router-link to="/bar">免费课程</router-link> <router-view></router-view> </div> </div> `, }; new Vue({ el:'#app', data(){ return{ } }, template:` <App/> `, components:{ App }, }) </script>
vue-router路由分类
一、命名路由
参考官网：命名路由
1、使用
（1）定义命名路由
（2）使用命名路由
2、案例
<div id="app"></div> <!--1.引入vue和vue-router文件--> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 const Foo = { data(){ return {} }, template: '<div>foo</div>' }; const Bar = { data(){ return {} }, template: '<div>bar</div>' }; // 2. 定义路由规则 const routes = [ { path: '/', redirect: '/foo' //重定向 }, { path: '/foo', //路由 name: 'Foo', component: Foo //路由对应的组件 }, { path: '/bar', name: 'Bar', component: Bar } ]; // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ mode: 'history', //这是一种模式 routes // (缩写) 相当于 routes: routes }); // 4. 创建和挂载根实例。 let App = { data(){ return{ } }, router, //相当于router:router template:` <div> <div class="header"> <router-link :to='{name:"Foo"}'>首页</router-link> <router-link :to='{name:"Bar"}'>免费课程</router-link> <router-view></router-view> </div> </div> `, }; new Vue({ el:'#app', data(){ return{ } }, template:` <App/> `, components:{ App }, }) </script>
二、动态路由匹配
参考官网：动态路由匹配
1、介绍
常见的路由范式：
（1）http://127.0.0.1:8080/index/user
动态路由匹配： （2）http://127.0.0.1:8080/user/1 动态参数（这里是1和2）用params表示
http://127.0.0.1:8080/user/2
（3）http://127.0.0.1:8080/user?user_id =1 user_id=1用query表示
2、使用
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
3、案例
注意：
$route:路由信息对象（属性）
$router：路由对象（创建的vVueRouter实例）,一般用作编程式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <!--1.引入vue和vue-router文件--> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 const Foo = { data(){ return { foo_id:null } }, template: '<div>foo{{ foo_id }}</div>', created(){ console.log(this.$route) //路由信息对象（以后找地址栏后面的参数可以用这个对象） // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar， // 原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建， // 复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 }, watch: { '$route' (to,from){ // 对路由变化做出响应，from表示原来的路由，to表示要到的路由 console.log(to.params.id); this.foo_id=to.params.id // 发送ajax，获取数据 } } }; const Bar = { data(){ return {} }, template: '<div>bar</div>' }; // 2. 定义路由规则 const routes = [ { path: '/', redirect: '/foo/1' //重定向 }, { path: '/foo:id', //路由 name: 'Foo', component: Foo //路由对应的组件 }, { path: '/bar', name: 'Bar', component: Bar } ]; // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ // mode: 'history', //这是一种模式 routes // (缩写) 相当于 routes: routes }); // 4. 创建和挂载根实例。 let App = { data(){ return{ } }, router, //相当于router:router template:` <div> <div class="header"> <router-link :to='{name:"Foo",params:{id:1}}'>首页1</router-link> <router-link :to='{name:"Foo",params:{id:2}}'>首页2</router-link> <router-link :to='{name:"Bar"}'>免费课程</router-link> <router-view></router-view> </div> </div> `, }; new Vue({ el:'#app', data(){ return{ } }, template:` <App/> `, components:{ App }, }) </script> </body> </html>
三、编程式导航路由
不通过点击a标签的方式，而是在页面中点击一些按钮触发事件，在方法里访问路由
1、介绍
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
语法形式：
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..."> |
router.push(...) |
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
2、案例
<div id="app"></div> <!--1.引入vue和vue-router文件--> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 const Foo = { data(){ return { foo_id:null } }, template:` <div> <div>foo{{ foo_id }}</div> <button @click = 'clickHandler'>跳转首页</button> </div> `, methods:{ //编程式导航 clickHandler(){ this.$router.push({ name:"Bar" }) } }, created(){ console.log(this.$route) //路由信息对象（以后找地址栏后面的参数可以用这个对象） // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar， // 原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建， // 复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 }, watch: { '$route' (to,from){ // 对路由变化做出响应，from表示原来的路由，to表示要到的路由 console.log(to.params.id); this.foo_id=to.params.id // 发送ajax，获取数据 } } }; const Bar = { data(){ return {} }, template: '<div>bar</div>' }; // 2. 定义路由规则 const routes = [ { path: '/', redirect: '/foo/1' //重定向 }, { path: '/foo:id', //路由 name: 'Foo', component: Foo //路由对应的组件 }, { path: '/bar', name: 'Bar', component: Bar } ]; // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ // mode: 'history', //这是一种模式 routes // (缩写) 相当于 routes: routes }); // 4. 创建和挂载根实例。 let App = { data(){ return{ } }, router, //相当于router:router template:` <div> <div class="header"> <router-link :to='{name:"Foo",params:{id:1}}'>首页1</router-link> <router-link :to='{name:"Foo",params:{id:2}}'>首页2</router-link> <router-link :to='{name:"Bar"}'>免费课程</router-link> <router-view></router-view> </div> </div> `, }; new Vue({ el:'#app', data(){ return{ } }, template:` <App/> `, components:{ App }, }) </script>
vue-router提供的内置 内容：
router-link
router-view
this.$route 路由信息对象（获取地址栏参数）
this.$router.push
浙公网安备 33010602011771号