Vue-Router来实现组件间跳转的三种方法

最新推荐文章于 2024-02-09 08:00:00 发布
最新推荐文章于 2024-02-09 08:00:00 发布
阅读量904 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhaosijia----1234/p/9513345.html
版权

一、通过js的编程的方式

<!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>

二、直接修改地址栏中的路由地址

<!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实现跳转

<!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>

 

转载于:https://www.cnblogs.com/zhaosijia----1234/p/9513345.html

weixin_30883777
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件之间的跳转
jiao0916的博客
04-10 882
假如传id过去: 给它加上一个点击事件 path后面是要跳转到的组件名称 在入口文件已经引入这个组件在这个组件里就可以不用引入了 pagrId是在地址栏显示的id名称 这里的e代表每条数据的id ...
vue3的组件跳转
最新发布
m0_65037354的博客
05-10 109
WEB组件互相跳转的方式
y980218的博客
09-08 204
第一种 重定向 1 重定向是多次请求 2 url会进行改变 3 无法共享请求之间的数据 4 由最后一个的servlet来决定访问结果 5 无法访问web-inf下的资源 可以跨域(可以访问其他项目) 第二种 请求转发 1 请求转发是一个请求 2 url不会改变 3 可以携带数据(数据不会丢失) 4 由最后一个servlet来决定响应结果 5 可以访问web-inf下面的资源 6 不可以跨域 ...
vue组件跳转过程及两个注意
weixin_37881839的博客
08-19 627
vue组件跳转过程： 1.编写vue组件 2.在router里配置组件的访问路径 3.app.vue里通过路径访问组件 注意： 两个"app"标签 （1）main.js中vue实例绑定的"app"，是index.html文件中的div标签。 ==>>vue实例只能绑定html页面内的元素。 （2）App.vue文件中的"app"标签是被同页面的样式绑定 【index.html】，【main.js】，【App.vue】，【router-&gt...
vue组件简介以及页面跳转
qq_52889028的博客
06-22 2135
vue组件基本介绍和页面跳转query和params之间的区别
Vue-Router实现组件间跳转的三种方法
12-29
通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下 提供了3种方式实现跳转： ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset=UTF-8> <title&...
vue-router实现组件间的跳转（参数传递）
08-28
主要为大家详细介绍了vue-router实现组件间的跳转，参数传递方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_...
【前端】实现Vue组件页面跳转的多种方式
码农研究僧的博客
02-09 6625
通过某个Button让页面多种方式跳转
vue路由router的基本使用及路由跳转的方式
jjjh968的博客
10-15 5052
路由的基本使用 1. 安装vue-router，npm install vue-router 2. 应⽤插件：Vue.use(VueRouter) // 下载路由之后，在main.js引入路由器 import VueRouter from 'vue-router' // 注册全局使用 Vue.use(VueRouter) 3. 编写router配置项 编写router文件夹里的index.js文件： // 引入路由 import VueRouter from 'vue-router' // ..
vue的子组件不能进行router的切换
weixin_30568715的博客
05-23 302
在用vue开发过程中，偶然一次使用在子组件中进行router的切换，发现不起作用，后来才反应过来，子组件只是一个组件，vue的路由的切换只能是在父组件（也就是真正的页面）里面进行跳转！ 转载于:https://www.cnblogs.com/tangjiao/p/9079069.html...
vue2中如何跨组件调用方法涉及路由跳转以及实现方式
yang114544的博客
11-03 1718
简单记录
【Vue基础】Vue路由，实现页面跳转
qq_42294095的博客
05-23 6051
VueRouter、、
vue路由跳转子组件_Vue实现路由跳转和嵌套
weixin_42101056的博客
01-14 528
一、配置 Router用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装cnpm i vue-router -D安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级然后在 router.js 中引入所需的组件，创建 routers 对象import Home from './components/home.vue...
vue路由跳转子组件_Vue路由跳转
weixin_27889245的博客
02-22 1922
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：methods：方案一：getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,})方案一，需要对应路由配置如下：{path: '/describe/:id',name: 'Desc...
路由跳转的两种方式及动态创建路由
桃桃雾的博客
09-06 3472
【路由】路由跳转的两种方式及动态创建路由。
vue父组件中调用子组件的方法
Dreamlandz的博客
07-26 1954
（1）通过ref直接调用子组件的方法 //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export
vue开发vscode常用快捷键
yinianzhijian99的专栏
06-23 7009
vscode常用快捷键
vue-router如何实现路由跳转,并且携带参数
04-02
在Vue中使用vue-router实现路由跳转并携带参数，可以通过以下步骤实现： 1. 在路由配置文件中定义路由路径和组件 ```javascript import VueRouter from 'vue-router' import Home from './components/Home.vue' ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值