vue day05 路由的使用

最新推荐文章于 2024-01-18 08:30:00 发布
最新推荐文章于 2024-01-18 08:30:00 发布
阅读量205 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/parkwoojin1102/article/details/118280242
版权

 什么是路由

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

如何使用路由

路由的安装

直接引用官网提供的cdn

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

路由的基本使用

  1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

  2. 创建路由new VueRouter(),接受的参数是一个对象

  3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

  4. path属性是url的地址,component属性就是显示的组件（传组件的对象）

  5. 创建的路由需要和vue实例关联一下

  6. 路由到的组件显示在哪个位置

实例：

<!DOCTYPE html>
<html>

<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>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        <!-- 5、预留展示区域 -->
        <router-view></router-view>
    </div>

    <template id="son">
        <div>
            子组件
        </div>
    </template>
    <script>
        let son = Vue.component("son", {
            template: "#son"
        })

        // 2、创建路由实例
        const router = new VueRouter({
            // 3、创建组件和路由映射关系
            routes: [
                {
                    path: "/",
                    component: Vue.component("haha", {
                        template: "<h2>hahah</h2>"
                    })
                },
                {
                    path: "/son",
                    component: son
                }]
        });
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            //4. 创建联系，挂载在Vue实例上
            router
        })
    </script>
</body>

</html>

路由的跳转

  1. router-link标签可以设置to属性

  2. 默认是a标签，可以通过tag设置包裹标签

//路由的跳转
<router-link to='/login'>登录</router-link>
// 通过tag可以指定router-link渲染的界面元素 转换成div标签
<router-link to='/registry' tag="div">注册</router-link>

路由重定向

redirect可以进行路由的重定向

实例：

<!DOCTYPE html>
<html>

<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>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        <router-view></router-view>
    </div>
    <!-- 子组件 -->
    <template id="son">
        <div>
            子组件
        </div>
    </template>
    <!-- 父组件 -->
    <template id="father">
        <div>
            父组件
            <router-link to="/son">去子组件</router-link>
            <router-link to="/son" tag="div">去子组件tag改变标签</router-link>
        </div>
    </template>
    <script>
        let son = Vue.component("son", {
            template: "#son"
        })

        let father = {
            template: "#father"
        }

        const router = new VueRouter({
            routes: [
                {
                    path: "/index",
                    component: father,
                },
                {
                    //路由重定向
                    //通过这种方式，在访问/路径的时候会重定向到/index路径
                    path: "/",
                    redirect: "/index"
                },
                {
                    path: "/son",
                    component: son
                }]
        });
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
             //ES6方法 把路由挂在到实例上
            router,
        })
    </script>
</body>

</html>

选中路由高亮

  • 使用默认的样式
    • 直接设置router-link-active
  .router-link-active {
        color: red;
        font-size: 40px;
    }

  • 自定义样式
    • 配置 linkActiveClass:'自定义的类名'
  .yanse {
        color: pink;
        font-size: 50px;
        font-weight: 700;
    }

  const router = new VueRouter({
    linkActiveClass: "yanse"
   })

定义参数

通过query的方式在url后加?参数名=参数的值

获取参数：$route.query.参数名

实例：

<!DOCTYPE html>
<html>

<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>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .router-link-active {
        color: red;
        font-size: 40px;
    }

    .yanse {
        color: pink;
        font-size: 50px;
        font-weight: 700;
    }
</style>

<body>
    <div id='app'>
        <router-view></router-view>
    </div>
    <!-- 子组件 -->
    <template id="son">
        <div>
            子组件
            <router-link to="/son">去子组件吧</router-link>
            <router-link to="/index?courseid=103">去父组件吧</router-link>
            <!-- 路由传参 -->
            <router-link :to="{path:'/index',query:{course:112}}">去父组件2</router-link>
            <router-link :to="{path:'/index',query:{course:courseid}}">去父组件3</router-link>
        </div>
    </template>

    <!-- 父组件 -->
    <template id="father">
        <div>
            父组件
            <router-link to="/son">去子组件吧</router-link>
            <router-link to="/index">去父组件吧</router-link>
            <router-link to="/son" tag="div"> 去子组件tag改变标签</router-link>
        </div>
    </template>
    <script>
        let son = Vue.component("son", {
            template: "#son",
            data() {
                return {
                    courseid: 223,
                };
            },
        })

        let father = {
            template: "#father",
            data() {
                return {
                    num: 223,
                }
            },
            created() {
                console.log(this.$route);
                console.log(this.$route.query);
            }
        }

        const router = new VueRouter({
            routes: [
                {
                    path: "/index",
                    component: father,
                },
                {
                    path: "/",
                    redirect: "/index"
                    // 定义必传参数
                },
                {
                    path: "/son/:id/:name",
                    component: son,
                },
            ],
            linkActiveClass: "yanse"

        });
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            router,
        })
    </script>
</body>

</html>

使用浏览器参数的方式传递参数

  1. 设置路由的时候/路由地址/:参数名

  2. 获取参数$route.params.参数名

<!DOCTYPE html>
<html>

<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>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .router-link-active {
        color: red;
        font-size: 40px;
    }

    .yanse {
        color: pink;
        font-size: 50px;
        font-weight: 700;
    }
</style>

<body>
    <div id='app'>
        <router-view></router-view>
    </div>
    <!-- 子组件 -->
    <template id="son">
        <div>
            子组件
            <router-link to="/son">去子组件吧</router-link>
            <router-link to="/index?courseid=103">去父组件吧</router-link>
            <!-- 路由传参 -->
            <!-- <router-link :to="{path:'/index',query:{course:112}}">去父组件2</router-link>
            <router-link :to="{path:'/index',query:{course:courseid}}">去父组件3</router-link> -->
        </div>
    </template>

    <!-- 父组件 -->
    <template id="father">
        <div>
            父组件
            <!-- <router-link to="/son">去子组件吧</router-link>
            <router-link to="/index">去父组件吧</router-link>
            <router-link to="/son" tag="div"> 去子组件tag改变标签</router-link> -->
            <router-link to="/son/112">去子页面</router-link>
            <router-link :to="{name:'son',params:{id:666}}">去子页面2</router-link>
            <router-link :to="{name:'son',params:{id:num,name:'lili'}}">去子页面3</router-link>
        </div>
    </template>
    <script>
        let son = Vue.component("son", {
            template: "#son",
            data() {
                return {
                    courseid: 223,
                };
            },
            created() {
                console.log(this.$route);
                console.log(this.$route.params);
            }
        })

        let father = {
            template: "#father",
            data() {
                return {
                    num: 223,
                }
            },
            created() {
                console.log(this.$route);
                console.log(this.$route.query);
            }
        }

        const router = new VueRouter({
            routes: [
                {
                    path: "/index",
                    component: father,
                },
                {
                    path: "/",
                    redirect: "/index"
                    // 定义必传参数
                },
                {
                    path: "/son/:id/:name",
                    component: son,
                    name: "son",
                },
            ],
            linkActiveClass: "yanse"

        });
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            router,
        })
    </script>
</body>

</html>

parkwoojin1102
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue 实现动态路由的方法
11-19
很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据，把我们前端配置的路由表...
vue中如何获取当前路由地址
weixin_43337481的博客
06-14 8426
结果：http://www.myurl.com:8866/test?一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。完成解析后的 URL，包含查询参数和 hash 的完整路径，即 “端口号/#” 之后的内容。结果：http://www.myurl.com:8866。9.window.location.hash（获取#之后的内容）7.window.location.search（请求的参数）1.window.location.href（当前URL）
Vue中路由的使用
gkx19898993699的博客
09-25 3629
Vue中路由的使用，重定向，命名视图，属性监听以及计算属性
vue路由的使用
喵酱
03-26 902
vue路由的使用
Vue.js——vue-router 60分钟快速入门
dengjie0448的博客
07-21 960
概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文将以示例的形式来介绍vue-router的各个特性，一共包...
vue-route路由详解
最新发布
温暖前端的博客
01-18 2066
配置路由格式：/router/:id传递方式：在path后面跟上对应的值传递后形成的路径:/router/1;
vue路由入门使用
01-08
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...
详解vue组件中使用路由方法
01-19
vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板...
vue中监听路由参数的变化及方法
12-13
在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数，在同一...
Vue 路由使用方法详解：从基础到高级
m0_58013334的博客
08-19 2066
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
Vue中的路由
weixin_64770583的博客
07-25 3万+
路由
路由（vue-router）（一）
weixin_64037609的博客
11-26 1260
在vue中，组件的渲染只能通过以下两种方式一、组件的嵌套（前几篇组件的嵌套）二、路由的渲染vue中的路由：一个对应一个。
VUE路由详解
peter__xu的博客
08-04 1314
目录一、路由的概念二、事前准备三、 路由的相关知识点3.1 路由的基本认识3.2 路由小案例3.3 路由模式的切换3.4 指定路由的渲染位置3.5 声明式导航3.5.1 无参模式3.5.2 传参模式3.5.3 $route 与$router的区别3.6 编程式导航3.6.1 第一种get方式3.6.2 第二种get方式3.6.3 post传参方式3.6.4 常见BUG3.7 路由重定向3.7.1 概念3.7.2 代码演示。
Vue中路由的详解
m0_68721674的博客
08-06 198
发现音乐关注--李四
# Vue 配置前端后端路由地址
不积跬步，无以至千里；不积小流，无以成江海
11-22 1万+
Vue学习（一） 配置后端项目地址 proxyTable: { '/api': { //使用"/api"来代替 target: 'http://127.0.0.1:8000', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http:/...
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 2892
学习Vue-router
项目中Vue Router及路由守卫的使用
qq_44962364的博客
08-07 472
Vue Router的基本使用
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue路由---基础篇
weixin_48843319的博客
03-01 1721
vue路由---基础篇
vue3子路由使用方法
09-03
在Vue3中，使用子路由需要在父组件中添加一个`<router-view>`标签，并将子组件的路由配置添加到父组件的路由配置中。 以下是一个示例代码： ```javascript import { createRouter, createWebHistory } from 'vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值