开发者学堂课程【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 地址的改变。
五、 实操
首先观察前端页面：
观察发现，在地址栏的最后面多个一个#/
这是我们导入这个包后它自己生成的一个
如果我们删除这个包，就不会显示了。
当我们在地址栏后输入 /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 的页面当中。这样就实现了一次路由计划。
以上就是路由最基本的使用。
