通过vue-router实现组件间的跳转

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量145 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wangruifang/p/7774071.html
版权

三、通过VueRouter来实现组件之间的跳转
提供了3种方式实现跳转：
①直接修改地址栏中的路由地址

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器  -->
        <router-view></router-view>
    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>这是我的登录页面</h1>
                </div>
            `
        })
        var testRegister = Vue.component("register",{
            template:`
                <div>
                    <h1>这是我的注册页面</h1>
                </div>
            `
        })
        //配置路由词典
        //对象数组
        const    myRoutes =[
        //当路由地址：地址栏中的那个路径是myLogin访问组件
        //组件是作为标签来用的所以不能直接在component后面使用
        //要用返回值
            //path:''指定地址栏为空：默认为Login页面
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            //myRoutes可以直接用上面的数组替换
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            //或者：
            /*
                router:new VueRouter({
                        routes:[
                            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
                        ]
                })
            */
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

 

②通过router-link实现跳转
<router-link to="/myRegister">注册</router-link>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器  -->
        <router-view></router-view>

    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>这是我的登录页面</h1>
                    <router-link to="/myRegister">注册</router-link>
                </div>
            `
            /*to后面是路由地址*/
        })
        var testRegister = Vue.component("register",{
            template:`
                <div>
                    <h1>这是我的注册页面</h1>
                </div>
            `
        })
        //配置路由词典
        const    myRoutes =[
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

 

③通过js的编程的方式
jumpToLogin: function () {
this.$router.push('/myLogin');
}

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器  -->
        <router-view></router-view>

    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>这是我的登录页面</h1>
                    <router-link to="/myRegister">注册</router-link>
                </div>
            `
            /*to后面是路由地址*/
        })
        var testRegister = Vue.component("register",{
            methods:{
                jumpToLogin:function(){
                    this.$router.push('/myLogin');
                }
            },
            template:`
                <div>
                    <h1>这是我的注册页面</h1>
                    <button @click="jumpToLogin">注册完成,去登录</button>
                </div>
            `
        })
        //配置路由词典
        const    myRoutes =[
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

 

转载于:https://www.cnblogs.com/wangruifang/p/7774071.html

dede3535
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 通过按钮使用组件跳转页面_Vue-Router实现组件间跳转的三种方法
weixin_39860919的博客
12-19 2759
通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下提供了3种方式实现跳转：①直接修改地址栏中的路由地址{{msg}}var testLogin = Vue.component("login",{template:`这是我的登录页面`})var testRegister = Vue.component("register",{template:`这是我的注册页面`})//配置路由词...
vue-router实现组件间的跳转（参数传递）
08-28
Vue-Router实现组件间的跳转（参数传递） Vue-Router是 Vue.js 官方提供的一款路由管理器，能够帮助开发者更好地管理应用程序中的路由关系。在本文中，我们将详细介绍如何使用 Vue-Router 实现组件间的跳转，包括...
route-view 在父组件中调用子组件的函数
wwHRestarting的博客
03-01 2645
应用场景举例： 在通过路由控制的父组件中，有一个公共的菜单栏， 展开某一个sub-menu时，需要把展开的key传递给子组件， 子组件通过这个key，请求后端拿到页面数据。 上述场景中用到了route-view组件。 父组件BasicLayout.vue文件中相关代码如下： <a-layout-content> <multi-tab v-if="multiT...
Vue-Router来实现组件间跳转的三种方法
weixin_30883777的博客
08-21 908
一、通过js的编程的方式 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> ...
vue路由跳转子组件_vue router动态路由下让每个子路由都是独立组件的解决方案...
weixin_32184669的博客
12-24 1123
vue-router 之动态路由vue-router官网上面是这样说的// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})然后，我就这样写了：this.$router.push({path:'manage', query: {id: 'tasklist'}})1结...
【Vue】通过vue-router实现页面跳转
qq_51933234的博客
04-29 1078
这部分内容是比较简单的了，但是我个人觉得对于原来是后端开发的想学一些关于vue页面跳转，数据交互的小伙伴来说还是有点帮助的。希望自己的博客能清楚的介绍这些知识点，如果有所帮助，记得支持博主一波哦！
Vue-router之页面跳转
integermain的博客
05-28 1390
官方文档见：Vue Router 是Vue.js官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码。
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3677
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
使用vue-router实现页面跳转
cyydd21的博客
11-11 1496
vue-router
Vue2---router实现路由跳转
AZURE060606的博客
05-02 743
而跳转的路径要以router/index.js中的path为准。现在访问active路径就可以显示Active组件了。所谓路由，就是将一个个组件映射到不同的路由url中。首先要将App内的内容换成router-view。现在去注册路由，还是以上面的Active组件为例。
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue-Router实现组件间跳转的三种方法
12-29
通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下 提供了3种方式实现跳转： ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset=UTF-8> <title&...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 741
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1082
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 549
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1057
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 316
【代码】博客前端项目学习day03——框架页。
vue-router实现页面路由跳转以及路由嵌套
05-18
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的实现单页面应用程序的路由功能。 Vue Router 提供了以下两种方式实现页面路由跳转： 1. 声明式导航：通过 `<router-link>` 组件实现页面跳转，该组件会被渲染成一个 `<a>` 标签，点击该标签后会触发路由跳转。 2. 编程式导航：通过 `$router` 对象提供的方法实现页面跳转，例如 `$router.push()`、`$router.replace()`、`$router.go()` 等方法。 下面我们来看一个简单的示例，在 Vue Router 中如何实现页面路由跳转： ```html <!-- 在模板中使用 router-link 组件 --> <router-link to="/home">Home</router-link> <!-- 在组件中使用 $router 对象实现编程式导航 --> <button @click="$router.push('/about')">About</button> ``` 在上面的示例中，我们分别演示了如何使用 `<router-link>` 组件和 `$router` 对象实现页面路由跳转，其中 `to` 属性表示跳转的目标路由地址。 此外，Vue Router 还支持路由嵌套的功能，可以通过嵌套路由的方式实现页面的嵌套展示。下面我们来看一个嵌套路由的示例： ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'videos', component: Videos } ] } ] }) ``` 在上面的示例中，我们定义了一个名为 `Home` 的路由组件，并在该组件中嵌套了两个子路由 `News` 和 `Videos`，这样就可以实现在 `Home` 组件中展示新闻和视频内容的功能。在实际开发中，我们可以根据实际需求来定义不同的路由组件和子路由，实现灵活的页面嵌套效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值