开发者学堂课程【Vue.js 入门与实战：路由-vue-router的基本使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8123
路由-vue-router的基本使用
内容介绍：
一、 路由使用
二、 登录
三、 注册
四、 总结
五、 实操
六、 自动跳转页面
七、路由的执行过程：
本节主要讲解怎么使用路由的操作方法
一、 路由使用
1.第一步：安装 vue-router 路由模块
在head模块里面写：
<script src=". /1ib/vue-router-3.0.1. is"></ script>
2. 第二步：创建一个路由对象
当导入 vue-router 包之后，在windows全局对象中，就有了一个路由的构造函数，叫做VueRouter。
在new路由对象的时候，可以为构造函数，传递一个配置对象。
var router0bj = new VueRouter ( { route//这个配置对象中的route 表示[路由匹配规则]的意思 })
3.举例
我们在访问网页的时候，页面会有两个按钮，左边按钮是登录，右边按钮是注册。在登录和注册按钮下面，放了一个框，这个框里面默认展示登录、注册、用户名、密码、登录按键等。
但如果用户没有注册，会点击注册按钮，当点击注册时，网页应该把登录的框替换成注册的框。即，点登录时，进入登录内容。点注册时，进入注册内容。这也属于我们路由的范围。
也就是说，每一个按钮都需要对应一个路由的地址，每一个地址都需要对应一个路由的组件。
二、登录
先来定义一个路由，写在new的对象routerobj里面：
代码：
routes: [ //路由匹配规则 //每个路由规则， 都是一个对象， 这个规则对象， 身上， 有两个必须的属性: //属性1是path， 表示监听哪个路由链接地址; // 属性2是component, 表示， 如果路由是前面匹配到的path, 则展示component 属性对应的那个组件 { path:' /1ogin'，component： } ]
此时会发现我们并没有设置组件，所以接下来创建登录组件，代码如下：
<script> //组件的模板对象 var login = { template:， <h1>登录组件</h1> ' }
注意：component的属性值，必须是一个 组件的模板对象，不能是组件的引用名称。路由对象传入到component：login，在这里面必须放组件模板对象，不能放组件模板引用名称。
组件名称代码如下：
Var component= (' ' , template: ' <h1>登录组件</h1>， })
不要前面的login，现在的login就组件名称，而这个名称只能在html中的<>去引用，不能以字符串的形式放在component里面，会报错。
三、 注册
先定义一个注册组件，代码如下：
Var register=( template: ' <h1>注册组件</h1>， })
然后在把这个对象放在路由里面，{path:’/registere’,component: register}。
目前，可以看到Vm和routeobj之间没有关联关系，如果想让其保持关联关系，可以把 routeobj 通过 vm 实例的属性 router ，可以把其间隙关系。
//router:routeobj，将路由规则对象，注册到vm示例上，用来监听URL地址的变化，然后展示对应的组件。
四、 总结
1.第一步：先导入包
2.第二步：创建了两个路由组件
3.第三步：
通过 new-VueRouter 得到一个路由的 obj 对象，在 router 里面通过 routers 指定了两个不同的规则：
（1）/login：展示登录组件
（2）/register：展示注册组件
4.第四步：
通过 router 的属性，指向 routerobj ，此时可以监听URL地址的改变。
五、 实操
首先观察前端页面：
观察发现，在地址栏的最后面多个一个#/
这是我们导入这个<script src="https : / /unpkg.com/vue-router /dist/vue-router.js"></script>包后它自己生成的一个
如果我们删除这个包，就不会显示了。
当我们在地址栏后输入 /login 和 /register 时，它是没有任何变化的，他们匹配成功了，但是前端页面是没有显示，这个是因为没有在页面中放容器。此时应该写入代码：
<div id=" app"> < router -view> < , router -view> </div>
此时输入 /login 和 /register 就会显示相应的执行结果如图：
Router-view 是 vue-router 提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个router-vue中去，所以我们可以把这个 router-view 看作是一个占位符。
六、 自动跳转到页面
为了方便不在地址值上面去输入login和register，在div下面写一个a标签。（代码如下：）
正确代码如下：
<a href="#/login">登录</a> <a href="# /register">注册</a>
此时刷新，页面会显示如下结果：
七、 路由的执行过程：
在代码里面有两个超链接，第一步点击这个超链接，就会修改地址值，此时已经把路由的对象传到url，路由就会监听到URL地址的改变，然后进行路由规则的匹配。如果有匹配，就会显示到页面的 router -view 的页面当中。这样就实现了一次路由计划。
以上就是路由最基本的使用。
