vue-router详解——小白速会
一、概述
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
而传统的多页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
路由中有三个基本的概念 route, routes, router。
1. route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
2. routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
3. router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?
这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
4. 客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
二、vue-router基本用法
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。
2.1 一个简单的单页应用
直接来看一个demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <div id="app"> <header> <router-link class="red" to="/home">Home</router-link> //用于跳转 <router-link to="/about">About</router-link> <!-- 增加两个到user组件的导航,展示动态路由,可以看到这里使用了不同的to属性 --> <router-link to="/user/123">User123</router-link> <router-link to="/user/456">User456</router-link> </header> <router-view></router-view> //用于被替换渲染 </div> </body> </html> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> <script src="../js/demo1.js"></script>
//1.创建组件 var Home = Vue.extend({ template: '<div>' + '<h1>Home</h1>' + '<p>{{msg}}</p>' + '</div>', data: function() { return { msg: 'Hello, vue router!' } } }); var About = Vue.extend({ template: '<div>' + '<h1>About</h1>' + '<p>This is the tutorial about vue-router.</p>' + '</div>' }); var User = Vue.extend({ //展示动态路由 template: '<div>' + '<h1>User</h1>' + '<p>我是user组件,动态部分是{{dynamic}}</p>' + '</div>', computed: { dynamic: function () { //当整个vue-router 注入到根实例后,在组件的内部,可以通过this.$route来获取到router实例。它有一个params 属性,就是来获得这个动态部分的。 return this.$route.params.id } }, watch: { //利用watch来监听$route的变化,可以进行更多的操作。to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象。 $route: function (to, from) { console.log(to), console.log(from) } } }); //2.创建router,并映射路由; var router = new VueRouter({ routes: [ { path: '/home', //映射路径 component: Home //映射组件 }, { path: '/about', component: About }, { path: '/user/:id', //配置动态的id,实现动态路由 component: User }, { path: '/', redirect: '/home' // 默认重定向 } ] }); //3.把创建好的路由挂载在根组件下面就可以了,即挂载到#app元素下面 const app = new Vue({ router }).$mount('#app'); //4.使用标签<router-link> ,<router-link> 有一个非常重要的属性 to,定义点击之后,要到哪里去 //5.使用<router-view>标签: 在页面上使用<router-view></router-view>标签,它用于渲染匹配的组件。
2.2嵌套路由
嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分。
在路由的设计上,首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了children属性,它也是一组路由,相当于我们所写的routes。
我们把上面的Demo简单修改一下:html页面不动,只是简单改一些js的部分
var Home = Vue.extend({ template: '<div>' + '<h1>Home</h1>' + '<p>{{msg}}</p>' + '<p>'+ '<router-link to="/home/phone">手机 </router-link>'+ //加入子路由跳转方式 '<router-link to="/home/tablet">平板 </router-link>'+ '<router-link to="/home/computer">电脑 </router-link>'+ '</p>'+ '<router-view></router-view>'+ //在父页面的里面加入子路由页面,用于子路由页面的替换和渲染 '</div>', data: function() { return { msg: 'Hello, vue router!' } } }); // 子路由组件 var phone = Vue.extend({ template: '<div>This is phone</div>' }); var tablet = Vue.extend({ template: '<div>This is tablet</div>' }); var computer = Vue.extend({ template: '<div>This is computer</div>' }); var router = new VueRouter({ routes: [ { path: '/home', //映射父页面路径 component: Home, //映射父组件 children: [ //利用children属性实现子路由 { path: "phone", //映射子路由页面路径 component: phone //映射子组件 }, { path: "tablet", component: tablet }, { path: "computer", component: computer }, // 当进入到home时,下面的组件显示 { path: "", component: phone } ] }, { path: '/about', component: About }, { path: '/user/:id', //配置动态的id,实现动态路由 component: User }, { path: '/', redirect: '/home' // 默认重定向 } ] });
2.3命名路由
命名路由,很简单,因为根据名字就可以知道,这个路由有一个名字,那就直接给这个路由加一个name 属性,就可以了。 给user 路由加一个name 属性:
{ name: 'user', path: '/user/:id', component: User },
命名路由的使用, 在router-link 中用动态的to属性就可以使用对象了
<router-link to="/user/123">User123</router-link> <router-link :to="{name:'user',params: {id:456}}">User456</router-link>
//这两个是等价的,当使用对象作为路由的时候,to前面要加一个冒号,表示绑定
2.4跳转
vue-router 有两种跳转页面的方法
第一种是使用内置的<router-link>组件,它会被渲染为一个<a>标签,如:
<router-link to="/home">Home</router-link>
< router-link>除了to还有其他的一些属性, 常用的有:
• tag
tag 可以指定渲染成什么标签,比如<router-link to = "/about ” tag=” li ”〉渲染的结果就是<li >而不是<a>。
• replace
使用replace 不会留下History 记录,所以导航后不能用后退键返回上一个页面,如<router-link to =”/about” replace>。
• active-class
当<router-link> 对应的路由匹配成功时,会自动给当前元素设置一个名为router-link-active的class,如需要修改样式,直接修改router-link-active就可以.
有时候,跳转页面可能需要在JavaScript 里进行,类似于window. location.href。这时可以用第二种跳转方法,使用router 实例的方法。
以demo中的about为例:
var About = Vue.extend({ template: '<div>' + '<h1>About</h1>' + '<p>This is the tutorial about vue-router.</p>' + '<button @click="handleRouter">返回home页</button>'+ //在about页面增加一个跳转按钮 '</div>', methods: { handleRouter: function () { this.$router.push('/home') //使用$router中的push方法就行路由跳转 } } });
$router 还有其他一些方法:
• replace
类似于<router-link>的replace 功能,它不会向history 添加新记录,而是替换掉当前的history 记录,如this.$router.replace (’/user/123'); 。
• go
类似于window.history.go(),在history 记录中向前或者后退多少步,参数是整数,例如:
//后退1 页
this.$router.go(-1) ;
//前进2 页
this.$router.go(2);