【vue】路由Router基础详解，带你快速入门~

什么是路由

后端路由： 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。
前端路由： 对于单页面应用程序来说，主要通过改变URL中的 hash(#) 来实现不同页面之间的切换。
hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现。

Vue路由基本使用

1、引入vue-router

我们需要引入 vue-router.js 文件，而且必须是在 vue.js 文件之后引入。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>

2、创建组件模板

创建两个组件模板对象，如下：

<div id='app'></div>
<script>//创建两个子组件 模板对象var login = {template:'<h3>登录模块<h3>'}var register = {template:'<h3>注册模块</h3>'}new Vue({el:'#app',data:{},methods: {},})
</script>

3、VueRouter实例

当导入 vue-router 包之后，在 window 全局对象中，就有了一个路由的构造函数叫做 VueRouter，在创建路由对象时，可以为构造函数传递一个配置对象。在配置对象中我们可以来创建我们的路由规则。

//创建路由对象
var routerObj = new VueRouter({//配置路由规则routes:[{path:'/login',component:login},{path:'/register',component:register}]
})

4、Vue实例绑定

创建的 VueRouter 对象需要绑定到Vue实例中，用来监听URL地址的变化，然后展示对应的组件。

5、router-view

router-view 标签是 vue-router 提供的元素，用来展示路由规则匹配到的组件，我们可以把它认为是一个占位符。我们想要使用router路由，就要通过 router-view 标签来占位我们要显示内容的位置。

<div id='app'><router-view></router-view>
</div>

6、访问

上面的演示是通过修改 #/ 后的内容来触发路由中的规则，我们也可以在页面中添加对应的操作按钮来便捷触发。

<div id='app'><a href="#/login">登录</a><a href="#/register">注册</a><router-view></router-view>
</div>

路由重定向

上面的案例中我们实现了路由的基本使用，但是页面第一次打开的时候，是没有路由规则的，我们可以给它配置一个登录模块，如下：

打开页面的效果实现了，但是地址显示的是 “/” ,我们希望地址和路由的结果一致，可以设置个重定向来处理。

//创建路由对象
var routerObj = new VueRouter({//配置路由规则routes:[//重定向设置{path:'/',redirect:'/login'},{path:'/login',component:login},{path:'/register',component:register}]
})

router-link

我们可以用 router-link 标签来替换掉 a 标签，这样会更灵活些，如下：

<div id='app'><!-- <a href="#/login">登录</a><a href="#/register">注册</a> --><router-link to='/login'>登录</router-link><router-link to='/register'>注册</router-link><router-view></router-view>
</div>

可以发现 router-link 最终渲染的标签也是 a 标签，我们可以通过 router-link 中的 tag 属性来修改渲染的标签类型。

高亮处理

有时候我们需要给被选中的标签设置特殊的样式，这时怎么办呢？看下面的动图。

通过演示我们发现，当对应的标签被选中时，会动态地给标签添加 class 属性：router-link-active，那么我们就可以利用这个属性了。

<style>.router-link-active{background: chocolate;font-size: 30px;}
</style>

上图实现了我们需要的效果，注意在 VueRouter 实例中有个属性叫 linkActiveClass ，可以设置我们特定的 class 值。

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script><style>.router-link-active, .myclass{background: chocolate;font-size: 30px;}</style>
</head>
<body><div id='app'><!-- <a href="#/login">登录</a><a href="#/register">注册</a> --><router-link to='/login' tag='span'>登录</router-link><router-link to='/register'>注册</router-link><router-view></router-view></div><script>//创建两个子组件 模板对象var login = {template:'<h3>登录模块<h3>'}var register = {template:'<h3>注册模块</h3>'}//创建路由对象var routerObj = new VueRouter({//配置路由规则routes:[//重定向设置{path:'/',redirect:'/login'},{path:'/login',component:login},{path:'/register',component:register}],linkActiveClass:'myclass'})new Vue({el:'#app',data:{},methods: {},router:routerObj})</script>
</body>
</html>