一、说明
- 后端路由：对于普通网站，前端通过URL地址请求后端，后台服务器监听接收每次的请求（URL），而这个请求需要返回什么资源给前端，这个处理的过程，就是通过路由分发的。后端路由把URL地址都对应到服务器上的资源进行处理分发。
- 前端路由：只在前端页面跳来跳去，不会发送请求到后台。对于单页面应用程序来说，主要通过URL中的hash号
#来实现不同页面之间的切换（URL地址后面接了#号）。
同时，hash有一个特点，http请求中不会包含hash相关的内容，只负责页面中跳来跳去（像html中的锚点，a连接的#，跳到指定位置）。
二、路由安装
1、直接下载/CDN
下载地址
直接下载Vue路由的包，然后直接再js中引入，主要要先引入vue.js。
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
在 Vue 后面加载导入vue-router，它会自动安装。
2、NPM安装
npm指令下载安装
npm install vue-router
如果在一个模块化工程中使用它（例如webpack），必须要通过Vue.use() 明确地安装路由功能。
要想import导入vue模块然后再导入路由模块，然后使用Vue.use()把路由注册到Vue身上。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)。
三、基本使用
1、路由基本使用写法
- 链接
<a></a>点击修改地址，地址后面拼上地址（用hash号#表示）。 - 路由对象已经注册到vue实例身上了，此时路由就会监听到路由的改变，就会进行路由规则的匹配。
- 匹配到
path则在<router-view></router-view>展示对应的component属性对应组件。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue路由的包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id='app'>
<a href="#/login">登陆</a>
<a href="#/register">注册</a>
<!-- vue-router提供的元素，用于展示路由对应组件 -->
<router-view></router-view>
</div>
<template id="templ1">
<h1>登陆组件</h1>
</template>
<script>
//组件的模板对象
var login = {
template:'#templ1'
}
var register={
template:'<h1>注册组件</h1>'
}
// 创建一个路由对象，导入包后window全局对象中就有VueRouter路由的构造函数
// 传入一个配置对象
var routerObj = new VueRouter({
//route //这个route表示 路由匹配规则
//就例如登陆和注册，每个按钮一个路由url，每个url对应一个组件
routes : [ //路由匹配规则
//每个路由匹配规则，都是一个对象
//两个必须属性：
//path：表示监听哪个路由链接地址
//component:如果路由是前面匹配到的path，则展示此属性对应的那个组件
{
path:'/login', //路由路径
component:login //此属性值必须是组件的模板对象，不能是组件名称
} ,{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: "#app",
data: {
},
router :routerObj //将路由规则对象，注册到vue实例上，用来监听url地址变化展示对应组件
});
</script>
</body>
</html>
2、router-link使用
- 虽然可以用
<a></a>进行路由匹配跳转，但是每次路径都需要加上hash号#很赘余。 -
vue-router提供了<router-link></router-link>元素。
-to属性，协商路由规则的path
-tag属性，改变<router-link></router-link>渲染结果标签，默认渲染成a标签，不论渲染成什么，都有点击路由功能
即把a标签作修改：
<router-link to="/login">登陆</router-link>
<router-link to="/register" tag="span">注册</router-link>
网友评论