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

最新推荐文章于 2024-07-23 16:00:30 发布

心。晴

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/jingjing217/article/details/108367986

版权

什么是路由

后端路由： 对于普通的网站，所有的超链接都是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>