（二）使用vue-cli学习使用vue-router

一、路由部分

  使用vue-router处理链接跳转，在vue-cli 构建的项目中默认安装，在生成的模板已经配置好了，如图：

  配置好之后，就可以在页面中使用了，常用的<a href=''></a>标签。vue-router提供了<router-link to=''></router-link>,提供当然就有它的好处，参考文档
 1.兼容性，无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致。
 2. 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
 3.当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了
处理路由跳转后，就需要显示跳转的内容，使用<router-view></router-view>

路由书写：

		export default new Router({
			routes: [
		  	{
			  	path:'/',
		  		redirect:'/login',
		  	},
		    {
		      path:'/login',
		      name:'login',
		      component:Login
		    },
		    {
		      path: '/start',
		      redirect:'/start/index',
		      name: 'start',
		      component:Start,
		      children:[
		        {
		          path:'index',
		          name:'index',
		          components:{
			          index:Index,
			          info:ContListInfo,
			          handle:ContListHandle
		          }
		        }
		      ]
	    }]
	})

这个路由规则四个意思：1、默认路由跳转，redirect。2、路由跳转匹配，‘/login’,匹配组件component:Login。3、子路由设置，children:[ …]，要默认显示某个子路由，redirect地址。4、默认视图显示or命名式，<router-view name='info'></router-view>,没有name<router-view></router-view>属性时显示默认视图，有name值时显示对应的组件。

其他路由规则

1、动态路由匹配，显示同一个组件，以url地址传递ID or name展示不同的数据。在路由规则中path:’/login/:id’，‘:’表示动态匹配，比如：‘/login/1’、‘/login/user’。如果不涉及复杂的页面逻辑以及不要求在url地址中显示当前的操作，可采用父子组件数据 传递来更改视图显示。
2、路由重定向，使用redirect ，指定路由地址‘/login’，或者命名的路由name，redirect:{name:‘login’}；路由别名，按找时机路由渲染，url地址是自己定义的，比如跳转到‘/login’,路由规则加属性 alias:’/api/login’。仅仅是展示用。
3、

路由实例

在vue实例中访问路由的实例，this.$router
1、通过编码实现路由跳转，this.$router.push()；如登录操作

//字符串
this.$router.push('home'); ‘/home’
//对象
const userId=123;
this.$router.push({ name: 'user', params: { userId }}); ‘/user/123’
this.$router.push({ path:user/KaTeX parse error: Expected 'EOF', got '}' at position 10: {userId}`}̲)` '…router.replace().替换掉历史记录，不会添加 3、this.$router.go() `在历史记录中前进或者后退多少布

路由对象属性：

对象	参数	描述
this.$router
	.path	获取当前的路由地址
	.params	key/value 对象 路由参数
	.query	key/value对象，查询参数，比如‘/user?id=1’,this.$router.query.id=1
	.name	当前路由的名称