Vue中路由的使用

最新推荐文章于 2023-08-19 11:47:50 发布

小陈码上努力

最新推荐文章于 2023-08-19 11:47:50 发布

阅读量133

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46505467/article/details/127679009

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

什么是路由

1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

如何使用路由

路由的基本使用
1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2 创建路由new VueRouter(),接受的参数是一个对象
3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4 path属性是url的地址,component属性就是显示的组件（传组件的对象）
5 创建的路由需要和vue实例关联一下
6 路由到的组件显示在哪个位置

<body>
    <div id="app">
        <!-- 通过路由切换的组件会被放在这里 -->
        <router-view></router-view>
    </div>

    <script>
        const login = {
            template: '<h2>登录</h2>'
        }

        // 这里实例化了一个路由
        const router = new VueRouter({
            routes: [{
                path: '/login',
                //这里需要注意的是我们直接组件的对象放在这里
                component: login
            }]
        });

        var vm = new Vue({
            el: '#app',
            // 把路由挂在到实例上
            router: router
        })
    </script>
</body>

路由的跳转

1 router-link标签可以设置to属性
2 默认是a标签，可以通过tag设置包裹标签

<router-link to='/login'>登录</router-link>
<router-link to='/registry'>注册</router-link>

路由重定向

redirect可以进行路由的重定向

选中路由高亮

使用默认的样式
直接设置router-link-active
自定义样式
配置 linkActiveClass:‘自定义的类名’

定义参数

通过query的方式在url后加?参数名=参数的值
获取参数：$route.query.参数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由传递参数</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入这个路由组件之后提供了一个VueRouter的构造方法 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .router-link-active {
            background-color: aquamarine;
            font-size: 20px;
        }
        .my-active {
            background-color: aquamarine;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 通过路由切换的组件会被放在这里 -->
        <!-- <a href="#/login">登录</a> -->
        <!-- <a href="#/registry">注册</a> -->
        <!-- 通过router-link 进行路由的跳转 -->
        <!-- 通过tag可以指定router-link渲染的界面元素 -->
        <!-- <router-link to='/login' tag='div'>登录</router-link> -->
        <router-link to='/login?id=123&name=张三'>登录</router-link>
        <router-link to='/registry'>注册</router-link>
        <router-link to='/detail?id=999'>某一篇新闻</router-link>
        <router-view></router-view>
    </div>

    <script>
        // 实现简单路由功能的步骤
        // 1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
           // 2. 创建路由new VueRouter(),接受的参数是一个对象
           // 3. 在实例化的对象里配置属性 routes :[],这个数组里的对象包含path属性和component属性
           // 4. path属性是url的地址，component属性就是显示的组件（传组件的对象）
           // 5. 创建的路由需要和vue实例关联一下
           // 6. 路由到的组件显示在哪个位置<router-view></router-view>
        const login = {
            template: '<h2>登录，父组件传递过来的id{{$route.query.id}},name：{{$route.query.name}}</h2>'
        }

        const registry = {
            template: '<h2>注册</h2>'
        }

        const newsDetail = {
            template: '<h2>文章的详情</h2>',
            created() {
                console.log(this.$route.query.id);
                // 根据这个id去请求后台数据，获取完整的新闻内容，之后进行展示
            },
        }

        // 这里实例化了一个路由
        const router = new VueRouter({
            linkActiveClass: 'my-active',
            routes: [{
                path: '/',
                // 通过这种方式，在访问/路径的时候会重定向到/login路径
                redirect: '/login'
            }, {
                path: '/login',
                //这里需要注意的是我们直接组件的对象放在这里
                component: login
            }, {
                path: '/registry',
                component: registry
            }, {
                path: '/detail',
                component: newsDetail
            }]
        });

        var vm = new Vue({
            el: '#app',
            // 把路由挂在到实例上
            router: router
        })
    </script>
</body>
</html>

小陈码上努力

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中路由的使用

1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；3 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）通过query的方式在url后加?参数名=参数的值获取参数：$route.query.参数名
复制链接

扫一扫