Vue.js 笔记09

关键词：vue-router

Vue.js提供了插件机制，可以在全局添加一些功能。它们可以简单到几个方法、属性，也可以很复杂，比如一整套组件库。

前端路由

SPA（单页面富应用）的核心是前端路由，路由，通俗来讲就是网址。
在专业一点，就是每次GET或者POST等请求在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分到不同的Controller，进行各种操作，最终将html或数据返回给前端，这就完成了一次IO，这种方式被称为后端路由，也就是多页面的。

后来，有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获取数据后，再用一定的方式渲染到页面里。所以，SPA就是在前后端分离的基础上，加一层前端路由。

前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用url的hash，就是常说的锚点(#)，JavaScript 通过hashChange事件来监听url的改变；另一种就是HTML5的 History 模式，它使url看起来像普通网站那样，以"/"分割，没有"#"，页面也不会跳转，这种方法需要服务端支持，服务端在接收到所有的请求后，都指向同一个HTML文件，否则出现404，因此，SPA只有一个html，整个网站所有的内容都在这一个html里，通过js来处理。

vue-router基本用法

（不以webpack打包的项目结构演示，直接在页面demo中演示）

本地环境下获取vue-router.js文件，然后通过<script>标签引入

<script src="./js/vue-router.js"></script>

引入后，写一个简单模板演示vue-router的代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
		<script src="./js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>Header</div>
			<main><router-view /></main>
			<div>Footer</div>
		</div>
		<template id="pagehome">
			<p>This is HomePage</p>
		</template>
		<template id="pageabout">
			<p>This is AboutPage</p>
		</template>
		<script>
			const pageHome = {
				template:pagehome
			}
			const pageAbout = {
				template:pageabout
			}
			const router = new VueRouter({
				routes:[
					{path:'/',component:pageHome},
					{path:'/about',component:pageAbout}
				]
			})
			var vm = new Vue({
				el:'#app',
				router
			})
		</script>
	</body>
</html>

根据url的路径，页面会自动切换<router-view/>处的视图，而不会刷新跳转网页

vue-router 默认使用URL hash 来存储路径，在这种方式下，为了访问例如
example.com上的/about路由，就需要跳转到example.com/#about
现在很多浏览器都支持HTML5 history API，这使得开发者无需跳转到一个新的页面就能更新页面的URL，只需要将路由的mode改为history：

const router = new VueRouter({
				mode:'history',
				routes:[
					{path:'/home',component:pageHome},
					{path:'/about',component:pageAbout}
				]
			})

链接导航

使用history模式时，页面的切换需要依靠<router-link>标签来实现，例如

<router-link to="/home">go to home</router-link>
<router-link to="/about">go to about</router-link>

这样在不同内容钟切换时，页面是不需要重新加载的，大幅提高了网站速度，因为所有的HTML、JavaScript和CSS都已经被下载下来了
<router-link>标签在用于hash模式时，同样能顺利切换，它能自动打理路由模式

<router-link>除了to以外还有几个常用的属性：

tag属性

默认情况下，使用<router-link>标签会在页面上渲染处<a>标签，例如上面的两行代码渲染结果就是：

<a herf="/home">go to home</a>
<a herf="/about">go to about</a>

在一些时候还需要渲染除了锚点以外的元素，比如导航栏的列表元素，这时就可以通过tag属性来做到：

<router-link to="/home" tag="li"> go to home</router-link>

上述代码中的渲染结果为：

<li>go to home</li>

之后Vue会往这个元素中添加一个事件监听器，以监测它被单击的时机，从而处理导航，但因此我们失去了锚点和href属性，浏览器不能把它原生识别为一个链接，造成一些我们不想要看到的效果，因此，我们可以在<router-link>元素里加上<a>锚点标签：

<router-link to="/home" tag="li"><a>go to home</a></router-link>

这样渲染出来的结果就是：

<li><a href="/home">go to home</a></li>

active-class属性

当<router-link>组件的 to 属性中的路径与当前页面的路径相匹配时，链接就被激活了( active )。假如处在/home，那么该链接就是激活的。

当链接被激活时，vue-router 会自动为生成的元素赋一个类(class)。在默认情况下，这个类是router-link-active ，不过你可以通过active-class属性来配置这个类。比如，你正在使用 Bootstarp 制作一个导航栏(navbar)，就可以设置当前被激活的链接类名为 active：

<ul class="nav navbar-nav">
        <router-link to="/home" active-class="active" tag="li"><a>Home</a></router-link>
        <router-link to="/about" active-class="active" tag="li"><a>About</a></router-link>
</ul>

原生事件

给某个<router-link>添加一个事件处理器( event hanlder) 时，可以用@click再加上.native修饰符来监听：

<router-link to="/home" @click.native="handleClick">Home</router-link>

单击这个链接时，handleClick就会被调用

编程式导航

除了用链接的方式来为用户提供导航功能，还可以运用路由器的一些实例方法来实现编程式导航。这些方法效仿浏览器原生的 history 方法，如history.pushState( )、history.replaceState( )以及history.go( )

可以用router.push（或组件实例中的 this.$router.push() )来进行路径跳转

router.push("/about")

这种方式与单击一个to属性为 /about 的<router-link>组件完全等效，事实上，单击<router-link>时，组件内部用的就是router.push( )方法

还有router.replace( )方法，它与router.push表现类似，都是导航至指定的路由，不同点在于，router.push会向history栈里添加一个新的记录，因此，如果用户按下返回键，路由器会跳到上一个路由，而replace则替换了当前的history记录，所以返回键只会回到之前的路由

对于router.go( )方法，它能让你在历史记录中前进和后退，后退一条记录，就用

router.go(-1)

前进十条记录，则用

router.go(10)

如果历史中没那么多记录，那么到达最前或最后时，调用就会自动终止。

导航守卫

假设想要限制未登陆的用户，禁止这些用户访问你应用的某些部分，同时你还有一个userAuthenticated( )方法用于当用户登录时返回 true。
基于上面的要求，可以为路由器添加一个router.beforeEach( )守卫，该守卫被传入3个参数：to、from及next，其中from和to分别表示导航从哪里来和到哪里去，而next则是一个回调，在里面可以让vue-router去处理导航、取消导航、重定向到其他地方或注册一个错误。

下述是一个例子，它以全局注册的方式阻止未认证用户访问 /account 路径下的任何内容：

    router.beforeEach(function(to,form,next){
        function userAuthenticated(){
            return false
        }
        if(to.path.startsWith('/account')&&!userAuthenticated())
            next('/login')
        else
            next()
    })

但，在守卫中一个一个去检查路径会让程序变得冗长难懂，路由元信息可以很好地解决这个问题。可以在路由上添加一个 meta 属性，并在守卫中重新获取它：

const router = new VueRouter({
	mode:'history',
	routes:[
		{
		path:'/account',
		component:pageAccount,
		meta:{
	           requiresAuth:true
                   }
		},
		{path:'/login',component:pageLogin}
	]
})
router.beforeEach(function(to,form,next){
        function userAuthenticated(){
            return false
        }
	if(to.meta.requiresAuth&&!userAuthenticated())
		next('/login')
	else
		next()
})

现在，无论用户在任何时候访问 /account ，路由器都会检查其 requiresAuth 属性，如果用户尚未认证，则会被切换到登录页面。
当使用嵌套路由时，to.meta 指向的是子路由的元信息，而非其父路由，也就是说，如果在 /account 上添加了meta属性，但用户访问的是 /account/id ，则to.meta获取到的对象是关于子路由的，而不是父路由。可以通过to.matched的方法来曲线救国：

router.beforeEach(function(to,form,next){
	function userAuthenticated(){
		return false
	}
	const requiresAuth = to.matched.some(function(record){
		return record.meta.requiresAuth;
	})
	if(requiresAuth&&!userAuthenticated())
		next('/login')
	else
		next()
})

现在，如果访问 /account/id ，而该路由又是 /account 的子路由，那么它们两个的meta对象都会被检查，而不只是 /account/id 的meta

除了 beforeEach 这个运行在导航之前的守卫，还有一个运行在导航之后的守卫 afterEach ，这个守卫只被传入两个参数 to 和 from，因此不会影响导航，可以用来做一些其他操作，比如调用to.meta.title来设置跳转后的标题，具体用法和 beforeEach 大同小异

vue-router在内部通过遍历路由数组的方式挑选被显示的路由，并选取其中匹配到当前URL的第一个：

const router = new VueRouter({
	mode:'history',
	routes:[
		{
			path:'/home/:userID',
			component:pageUser',
		},
		{
			path:'/home/me',
			component:pageMe',
		}
	]
})

在上述路由中，我们是无法通过 /home/me 访问到pageMe页面的，因为路径会首先被 /home/:userID 匹配（动态路由的内容在下面一小节中），所以 userID就被设置成了 me，从而显示的是pageUser组件，如果需要访问 pageMe组件，就需要把该路径对象写在动态路由的前面防止误匹配

动态路由

如果想要匹配用户的ID作为路径的一部分并利用它，可以使用动态路径匹配，也就是说可以通过一种专门的语法来指定路径规则，假如我们想要让组件在路径是 /user/1234 时被显示，而其中的1234可以改为任意内容，就可以像下面这样指定路由：

const router = new VueRouter({
	mode:'history',
	routes:[
		{
			path:'/user/:userID',
			component:pageUser',
		}
	]
})

这样，任何匹配到 /user/:userID 的路径都会被渲染出 pageUser 组件

在组件实例中，可以通过使用属性 this.$route 来获取当前的路由对象，这个对象包括了一些有用的属性，诸如当前被访问的完整路径、URL的查询参数等，就上面这个例子来说，最有用的属性就是 params，它包含了被动态匹配的URL的各个部分。如果访问/user/1234，那么params就等于：

{
	"userID":"1234"
}

动态匹配规则不需要一定在URL的末尾，/user/1111/info 路径下的 1111 也仍然能够被匹配到，同样地，也可以设置多段动态部分，例如 /user/:userID/post/:pageNum，能同时匹配多段数据，并在params中生成对应个数的可用数据

路由参数作为组件属性传入

除了在组件中使用 this.$route.params ，还可以让 vue-router 将 params 作为路由组件的 props 传入，如：

<template id="pageuser">
	<p>User ID: {{$route.params.userID}}</p>
</template>
<script>
	const pageUser = {
		template:pageuser
	}
	const router = new VueRouter({
		routes:[
			{
				path:'/user/:userID',
				component:pageUser
			}
		]
	})
</script>

当导航至 /user/1234时，{{$route.params.userID}}就会被自动替换为1234

如果想要vue-router 将 userID 作为组件的一个属性传入，可用在路由中指定 props：

<template id="pageuser">
	<p>User ID: {{userID}}</p>
</template>
<script>
	const pageUser = {
		props:['userID'],
		template:pageuser
	}
	const router = new VueRouter({
		routes:[
			{
				path:'/user/:userID',
				component:pageUser,
				props:true
			}
		]
	})
</script>

使用 $route.params来代替props的好处是，组件与 vue-router 不再紧密耦合。

嵌套路由

在某个路由区域内如果还存在其他使用频率高的子路由，它只有一小块内容会变化，这种情况下可用使用嵌套路由。

嵌套路由允许指定子路由，并用另一个<router-view />来显示其内容，如：

const router = new VueRouter({
	routes:[
		{
			path:'/setting',
			component:pageSettings,
			children:[
				{
					path:'profile',
					component:pageSettingProfile
				},
				{
					path:'email',
					component:pageSettingEmail
				}
			]
		}
	]
})

只需要在 pageSetting 组件中加入一个<router-view />即可

重定向和别名

vue-router可使用一个 redirect 属性，用于代替component 实现重定向：

const router = new VueRouter({
	routes:[
		{
			path:'/setting',
			redirect:'/preferences'
		}
	]
})

另一种重定向的方法，就是给组件取一个别名，例如，如果你想让一个页面从 /settings 和 /preferences 都可以被访问，则可以给 /settings 路由取一个叫 /preferences 的别名：

const router = new VueRouter({
	routes:[
		{
			path:'/setting',
			alias:'/preferences',
			component:pageSettings
		}
	]
})