Vue实现简单路由跳转

拼搏现实的明天。 2022-01-11 05:25 242阅读 0赞

##### 1. 新建一个项目 #####

--------------------

##### 2. 在components中新建一个文件 这里是test1.vue，内容如下 #####

--------------------

<template>
        <div>this is 2</div>
    </template>
    <script>
    export default {
        name:'test1'
    }
    </script>

##### 3. 在router—>index.js中注册 test1.vue组件 --内容如下（整个文件） #####

--------------------

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import test1 from '@/components/test1'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },{
          path: '/to2',
          name: 'test1',
          component: test1
      }
    
      ]
    })

##### 4. 清空HelloWorld.vue文件原内容，输入如下内容 #####

--------------------

<template>
     <div>
      this is 1
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld'
    }
    </script>

#####  效果图 #####

--------------------

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20220111/dfde23f34f6942559e4d30d277df737f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 206 阅读

相关 Vue 3路由跳转

import { useRouter } from 'vue-router'; export default { setup() {

ゝ一纸荒年。/ 2022年10月09日 02:43/ 0 赞/ 220 阅读

相关 vue-router实现路由跳转

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货： 1.返回上个页面(不带参数) this.$router.go(-1); 2.指定跳转的地址(不带参

港控/mmm°/ 2022年05月17日 21:26/ 0 赞/ 282 阅读

相关 Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。 vue路由配置的步骤： https://router.vuejs.org/ 1.安

亦凉/ 2022年03月17日 05:17/ 0 赞/ 276 阅读

相关 Vue简单项目中的路由跳转

最近跟着视频在做一个vue的小项目，其中的路由跳转跟我之前学习的router跳转有所不同。此方法简洁明了，所以想把记下来，方便以后的学习。之前学习的rou

绝地灬酷狼/ 2022年02月16日 03:21/ 0 赞/ 248 阅读

相关 Vue实现简单路由跳转

1. 新建一个项目 -------------------- 2. 在components中新建一个文件这里是test1.vue，内容如下 ----------

拼搏现实的明天。/ 2022年01月11日 05:25/ 0 赞/ 243 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 420 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 393 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 565 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

忘是亡心i/ 2021年09月16日 13:04/ 0 赞/ 505 阅读