Vue路由，路由传参，嵌套路由

最新推荐文章于 2024-04-20 09:55:26 发布
最新推荐文章于 2024-04-20 09:55:26 发布
阅读量125 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wengeaiyuanyuan/article/details/106770032
版权

文章目录

Vue路由

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来

路由的基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmrC4CUU-1592221876236)(en-resource://database/632:1)]

第一步：创建组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">

    </div>

</body>
<script>
    var login = {
        template: "<h2>我是登录组件</h2>"
    }

    var register = {
        template: "<h2>我是注册组件</h2>"
    }

    new Vue({
        el: "#app",
        data: {
            
        }
    })
</script>
</html>

第二步：创建Router

导入：vue-router-3.0.1.js 包
VueRouter：创建一个VueRouter实例对象
routes：routes中定义了路由的规则
path：表示路由的url
redirect：就是重定向，访问path时，会被重定向到redirect指定的路由
component：表示路由要跳转的组件
router-link：控制组件的切换，内容会被默认渲染成标签
tag：指定router-link被渲染成哪种标签
router-view：相当于一个占位符，当组件进行切换时，该路由会匹配到响应的组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login" tag="button">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition>
            <router-view></router-view>
        </transition>
    </div>
</body>
<script>
    var login = {
        template: "<h2>我是登录组件</h2>"
    }
    var register = {
        template: "<h2>我是注册组件</h2>"
    }
    //创建一个VueRouter实例对象
    let routerObj = new VueRouter({
        routes:[//定义规则
            {path:'/',redirect:'login'},//path：路由的url，redirect：重定向的指定路由
            {path:"/login",component:login},//component:跳转的路径
            {path:"/register",component:register}
        ]
    })
    new Vue({
        el: "#app",
        data: {
            
        },
        router:routerObj
    })
</script>
</html>

第三步：添加动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        /* v-enter 这是个时间点，是进入之前，元素的起始状态，此时还没有进入 */
        /* v-leave-to 这是个时间点，是动画离开之后，元素的终止状态，此时，元素 动画已经结束了 */
        .component-enter,
        .component-leave-to {
            opacity: 0;
            transform: translateX(50px);
        }

        /* v-enter-active 入场动画的时间段 */
        /* v-leave-active 离场动画的时间段 */
        .component-enter-active,
        .component-leave-active {
            transition: all 0.5s ease;
        }
    </style>

</head>

<body>
    <div id="app">
        <!-- 
		router-link : 控制组件的切换 
		tag : 指定被渲染成那种标签
	-->
        <router-link to="/login" tag="button">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition name="component" mode="out-in"> <!--name和mode是添加动画必须的-->
            <router-view></router-view>
        </transition>
    </div>

</body>
<script>
    var login = {
        template: "<h2>我是登录组件</h2>"
    }

    var register = {
        template: "<h2>我是注册组件</h2>"
    }

    //创建一个VueRouter实例对象
    let routerObj = new VueRouter({
        routes: [//定义规则
            { path: '/', redirect: 'login' },//path：路由的url，redirect：重定向的指定路由
            { path: "/login", component: login },//component:跳转的路径
            { path: "/register", component: register }
        ]
    })

    new Vue({
        el: "#app",
        data: {

        },
        router: routerObj
    })
</script>

</html>

路由传参

方法一：直接在url路径后面./login?id=xx&name=xx
方法二：使用restful风格：./login/id/name
this.$route：获取路由对象

  • query：适用于？后面拼接的参数
  • params：适用于/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        /* v-enter 这是个时间点，是进入之前，元素的起始状态，此时还没有进入 */
        /* v-leave-to 这是个时间点，是动画离开之后，元素的终止状态，此时，元素 动画已经结束了 */
        .component-enter,
        .component-leave-to {
            opacity: 0;
            transform: translateX(50px);
        }

        /* v-enter-active 入场动画的时间段 */
        /* v-leave-active 离场动画的时间段 */
        .component-enter-active,
        .component-leave-active {
            transition: all 0.5s ease;
        }
    </style>

</head>

<body>
    <div id="app">
        <!-- 
		router-link : 控制组件的切换 
		tag : 指定被渲染成那种标签
	-->
        <router-link to="/login?id=123&name=曹青稳" tag="button">登录</router-link>
        <router-link to="/register/456/周园园">注册</router-link>
        <transition name="component" mode="out-in"> <!--name和mode是添加动画必须的-->
            <router-view></router-view>
        </transition>
    </div>

</body>
<script>
    var login = {
        template: "<h2>我是登录组件{{this.$route.query.id}}-----{{this.$route.query.name}}</h2>"
    }

    var register = {
        template: "<h2>我是注册组件{{this.$route.params.id}}-----{{this.$route.params.name}}</h2>"
    }

    //创建一个VueRouter实例对象
    let routerObj = new VueRouter({
        routes: [//定义规则
            { path: '/', redirect: 'login' },//path：路由的url，redirect：重定向的指定路由
            { path: "/login", component: login },//component:跳转的路径
            { path: "/register/:id/:name", component: register }
        ]
    })

    new Vue({
        el: "#app",
        data: {

        },
        router: routerObj
    })
</script>

</html>

路由嵌套

坑1：
坑2：微信登录

  • 之间要写微信登录
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由嵌套</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <!--vue-router引用要在Vue引用之后-->
</head>

<body>
    <div id="app">
        <router-link to="/login" tag="button">登录</router-link>
        <transition>
            <router-view></router-view>
        </transition>
    </div>

    <template id="login">
        <div>
            <router-link to="/login/dengweixin">微信登录</router-link>
            <router-link to="/login/dengzhanghao">账号登录</router-link>
            <router-view></router-view>
        </div>
    </template>

</body>


<script>
    var login = {
        template: "#login"
    }

    var weixin = {
        template: "<h2>微信登录</h2>"
    }

    var zhanghao = {
        template: "<h2>账号登录</h2>"
    }

    let routerObj = new VueRouter({
        routes: [
            { path: '/', redirect: '/login' },
            {
                path: '/login',
                component: login,
                // children属性用于指定子路由，通过子路由可以实现路由的嵌套. 
                // 里面定义的内容和外面没有区别
                children: [
                    { path: 'dengweixin', component: weixin },
                    { path: 'dengzhanghao', component: zhanghao }
                ]
            }
        ]
    })
    new Vue({
        el: "#app",
        data: {

        },
        router: routerObj
    })
</script>

</html>
_曹家三少
关注
专栏目录
Vue实现嵌套路由
GIS摆渡人
04-20 7380
嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看Vue的官网教程。 当我们点击左边的项目的时候，我们知道，他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面，我们可以看到，他就是一个路由。或者我们应该说，他就是一个子路由。接下来，我们就说一下怎么实现这个子路由功能。 我们先去ElemetUI里面选一个吧。我选的是下面 它对应的代码如下：我们将它写到我们的Main.vue文件中即可
路由嵌套、传参
xiaoyu168521的博客
11-10 331
嵌套路由、路由传参(query、params)、props
vue路由，路由传参（parmas,query）
Xiaocong__的博客
02-14 658
一、Vue路由基础用法： 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由：引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由：引入并创建组件 import BYHome from './components/BYHome.vue' import BYNews from './components/BYNews.vue' import HelloWorld fr
vue路由、路由传参
m0_62351775的博客
01-30 1134
vue路由的基础用法 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由：引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由：引入并创建组件 import BYHome from './components/BYHome.vue' import BYNews from './components/BYNews.vue' import HelloWorld from '
vue路由，路由传参（parmas,query）(1)
2401_84091742的博客
04-20 949
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
Vue路由传参的几种方式
热门推荐
zhouzuoluo的博客
07-28 5万+
前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.html params传参（url中显示参数） ...
Vue路由管理及传参
WebGIS搬砖工程师
01-07 603
以Vue为基础做一套WebGIS系统，更多需要的是嵌套路由和VueX状态管理，因此针对网上的教程学习后，自己补充一些自己的观点，进行学习与巩固
vue 路由传参 编程式路由导航
m0_63327154的博客
03-09 565
(2)路由传参 ①query传参 this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) // html 取参 $route.query.id // script 取参 this.$route.query.id ②params传参 this.$router.push({name:'home',params: {id:'1'}}) ...
vue中的路由跳转和传参
qq_47793359的博客
03-30 2280
一：注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push（"路由地址"）来跳转到目标路由页面； 想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。 当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.p
Vue-路由（vue2，vue3）的使用-嵌套路由-路由传参-命名
qq_67801847的博客
08-13 558
2.通过路由放入的组件叫做路由组件（放在pages中），通过平常组件放入称为一般组件（放在compents中）3.2：创建路由路径并且生成index.js文件。2.1：npm i vue-router (插件)1.路由：一组key和value的组合。3.4:指定组件呈现位置。1.不用的组件都被销毁。...
vue-router 路由传参用法实例分析
10-15
总的来说，Vue Router 提供了丰富的功能来管理应用的路由，包括动态路由参数、查询参数和嵌套路由。正确理解和使用这些功能，可以帮助我们构建出灵活、可维护的 Vue 应用。在实际开发中，根据项目需求选择合适的传参...
详解vue路由篇(动态路由、路由嵌套)
12-08
总结来说，Vue 路由是实现组件与 URL 之间映射的关键，动态路由和嵌套路由则进一步增强了路由的灵活性，允许我们处理更复杂的导航场景。通过理解和熟练运用这些概念，开发者可以构建出功能丰富的 Vue 单页面应用。
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
本文重点介绍了Vue Router的几个关键功能：路由缓存、路由嵌套、路由守卫以及监听物理返回操作，这些都是在开发过程中常会遇到的需求。 路由缓存是指在用户跳转至不同的视图组件时，保持某些视图的状态，以提高用户...
基于微信小程序的新生报到系统设计与实现.docx
09-13
基于微信小程序的新生报到系统设计与实现.docx
基于java的电商平台的设计与实现.docx
09-13
基于java的电商平台的设计与实现.docx
基于java的大学生智能消费记账系统的设计与实现.docx
09-13
基于java的大学生智能消费记账系统的设计与实现.docx
基于java的植物健康系统设计与实现.docx
09-13
基于java的植物健康系统设计与实现.docx
weixin151云匹面粉直供微信小程序+springboot.rar
最新发布
09-13
所有源码，都可正常运行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值