专栏首页Golang开发Vue路由vue-router

Vue路由vue-router

概述

Vue Router 是 Vue.js 官方的路由管理器 github: https://github.com/vuejs/vue-router 中文官方网站https://router.vuejs.org/zh/ 安装vue-router

npm isntall vue-router --save

HelloWorld

  1. 创建组件Bar.vue
<template>
    <div >
        <h1>Bar</h1>
        <router-link to="foo">跳转到Foo</router-link>
    </div>
</template>

<script>
    export default {
        name: 'Bar',
    }
</script>
  1. 创建组件Foo.vue
<template>
    <div>
        <h1>Foo</h1>
        <router-link to="bar">跳转到Bar</router-link>
    </div>
</template>

<script>
    export default {
        name: "Foo",
    }
</script>

<style scoped>

</style>
  1. 创建文件router,在其目录下创建index.js文件
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)

import Bar from '../components/Bar'
import Foo from '../components/Foo'

export default new Router({
    routes: [
        {
          path:"/",
          redirect:"/foo"
        },
        {
            path: '/foo',
            component: Foo
        },
        {
            path: '/bar',
            component: Bar
        }
    ]
});
  1. 将App.vue修改
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <router-view></router-view>
        </div>
</template>

<style>
    #app {
        text-align: center;
        margin-top: 60px;
    }
</style>
  1. 在main.js注册路由器
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

动态路由

创建组件User.vue

<template>
    <div>
        {{$route.params.id}}
    </div>
</template>

修改router目录的index文件

import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from  '../components/User'

export default new Router({
    routes: [
        {
            path:'/user/:id',
            component:User
        }
    ]
});

访问的http://localhost:8080/#/user/12347

图片.png

设置“路径参数”,将User.vue 修改成

<template>
    <div>
        {{$route.query.id}}
    </div>
</template>

增加路由配置

        {
            path:'/user',
            component:User
        }

访问路径 http://localhost:8080/#/user?id=2

router-view

创建组件文件Profile.vue

<template>
    <div>
        用户画子界面
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

修改路由文件router/index.js

import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from  '../components/User'
import Profile from '../components/Profile'
export default new Router({
    routes: [

        {
            path:'/user',
            component:User,
            children:[
                {
                    path:"profile",
                    component:Profile
                }

            ]
        },
        {
            path:'/user/:id',
            component:User
        }

    ]
});

同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。 访问http://localhost:8080/#/user/profile

图片.png

路由组件传参

方式 1: 路由路径携带参数(param/query) 配置路由

children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]

路由路径 参数传递 注意需要加上冒号:

<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

路由组件中读取请求参数,获取传递数据 注意是route 而不是router

this.$route.params.id

方式2 <router-view>属性携带数据

<router-view :msg="msg"></router-view>

缓存路由组件对象

  1. 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
  2. 如果可以缓存路由组件对象, 可以提高用户体验
<keep-alive>
<router-view></router-view>
</keep-alive>

路由导航

相关 API

  1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  3. this.$router.back(): 请求(返回)上一个记录路由
  4. this.$router.go(-1): 请求(返回)上一个记录路由
  5. this.$router.go(1): 请求下一个记录路由

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue状态管理vuex

    在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex....

    羊羽shine
  • Python爬虫——Selenium

    安装chromium 官方下载地址是http://chromedriver.chromium.org/downloads,注意需要和本地安装的Chrome浏览...

    羊羽shine
  • iOS运行时(1)——类(Class)和对象(id)

    objc_class结构体内,有一个Class类型的变量叫isa,由上面可以知道Class是一个objc_class指针,因此isa是一个objc_class指...

    羊羽shine
  • Vue实战系列—路由轻松设置vue-router(3)

    在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。

    前端大彬哥
  • Vue自动化路由(基于Vue-Router)开篇

    好久不见~ 若羽又开篇Vue的内容了。 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用。[Github地址] [npm地址]

    若羽
  • 【云+社区年度征文】vue自动化路由开篇

    年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用。[Github地址] [npm地址]

    若羽
  • Vue Router详细教程

    额,啥玩意? 没听懂。在生活中,我们有没有听说过路由的概念呢? 当然了,路由器嘛。路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送。路由是决定...

    说故事的五公子
  • 16.动态路由传值和get传值

    玩蛇的胖纸
  • 使用vite+vue3搭建项目

    创建views文件夹,在该文件夹下创建两个vue文件 Home.vue 和About.vue 用来测试路由功能是否ok

    lilugirl
  • [译] 对 Vue-Router 进行单元测试

    原文:https://medium.com/js-dojo/unit-testing-vue-router-1d091241312

    江米小枣

扫码关注云+社区

领取腾讯云代金券