vue-router使用 看着篇就够了

本文详细介绍了Vue Router的基本概念和初级应用,包括如何创建组件A、B、C并配置路由,以及在HelloWorld.vue中添加链接。接着探讨了Vue Router的中级应用,讲解了动态定义路由、传递参数的方法,尤其是通过`router-link`组件正确传递参数的方式。文章强调了`router-link`的`to`属性和`tag`属性的用法,并指出虽然两种参数传递方式外观不同,但在接收参数时并无区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官网地址:https://router.vuejs.org/zh/

先来个自我介绍吧,我就是你们口中的路由,我的作用就是告诉你们怎么到达某地,比如你想去一个地方(前提是这个地方是已经存在的)我会查询我的路线图(路由配置)告诉你怎么过去。明白了吧,我的作用就是给你们导航的,有了我的存在,你们不用在详细的记住每一条路线图,只需要记住要去的目的地名字就行了,至于怎么过去,那是我的事,你就不用操心了,完全按照我的指示就能又快有准的到达目的地。

对了,我还有三个助手,他们分别是:

1.router :这位是我的指令官,他管理着所有的 route,当你需要指路时,他会召集所有的route,到routes集合,然后一个一个询问谁知道路线,直到找到那个route。如果找到了那个知道路线的route,router就派出他去为你导航,直至把你送到目的地。

2.routes:所有的路线route都在这里存放。

3.route:看名字也知道我是单数了,能力有限,我只能存放一条路线图。

认识了我的三位助手,对我也有个简单的认识了,下面进入实操环节。

--------分割线-----------

一:vue-router 初级应用

最终期望:在首页中点击对应的连接进入对应的组件。

在 components中新建三个组件 分别是:A、B、C

 

A:

<template>

<div class="hello">

<ul>

<li>

{{name}}

</li>

</ul>

</div>

</template>

<script>

export default {

name: 'HelloWorld',

data () {

return {

name: 'my name is A'

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

B:

<template>

<div class="hello">

<ul>

<li>

{{name}}

</li>

</ul>

</div>

</template>

<script>

export default {

name: 'HelloWorld',

data () {

return {

name: 'my name is B!'

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

font-weight: normal;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

</style>

C:

<template>

<div class="hello">

<ul>

<li>

{{name}}

</li>

</ul>

</div>

</template>

<script>

export default {

name: 'HelloWorld',

data () {

return {

name: 'my name is C!'

}

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

font-weight: normal;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

</style>

配置路由:

/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import A from '@/components/A'

import B from '@/components/B'

import C from '@/components/C'



Vue.use(Router)



export default new Router({

routes: [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld

},

{

path: '/A',

name: 'A',

component: A

},

{

path: '/B',

name: 'B',

component: B

},

{

path: '/C',

name: 'C',

component: C

}

]

})



在 HelloWord.vue中引入A、B、C三个组件的连接、

<template>
  <div class="hello">
    <ul>
      <li>
        <a href="/#/A">A</a>
      </li>     
      <li>
        <a href="/#/B">B</a>
      </li>   
      <li>
        <a href="/#/C">C</a>
      </li>           
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行命令:npm run dev

打开网站运行一下:

 

到这里vue-router的初级应用就介绍完了,总结下,有三个部分的知识点

1.定义三个组件 A、B、C

2.在router/index.js文件中引入三个组件,并做相应的路由配置

3.在页面中添加3个a标签,分别跳转到对应的组件

这部分内容比较初级,只是对路由做了简单的演示,通过定义好的路由进入对应的组件,在我们平时开发中,涉及到的需求要比这复杂的多,后面的内容会慢慢加深难度,接下来开始讲解vue-router的进阶版:vue-router 中级应用,这部分内容分三个小节:

1.怎么动态定义路由

2.路由中怎么传递参数

在动态设置路由中也达到了传递参数的目的,但是这并不是正确的传递参数的姿势,只是得到了路径中的一个url节点。用这种方式传递参数比较局限。
我们下面介绍另一种传递参数的方式,在介绍这种方式之前,需要先了解一个组件:router-link
router-link才是添加导航连接的正确方式。有人可能会说,那我直接使用<a></a>不是一样的效果吗,而且写起来还更简单。
非也,能提到这一点肯定还不知到其实router-link默认的渲染结果就是<a></a>
<router-link to="/link">link</router-link>
渲染结果
<a data-v-acf16c92="" href="#/link" class="">link</a>
知道这一点是不是对router-link更好奇了,那看看还有哪些更好用的属性?
to:将要到达的连接,可接受的参数有两种string、object,并且这个属性是必须要添加的。

如果不写这个属性:


当使用string类型时,这个string值就是路径,没啥好说的,重点看一下当参数是object时,router-link是怎么渲染的,同时,参数也是在这个object中写入的。
写2个例子,
<router-link :to="{ name: 'link', params: { myName: '李古拉雷' }}">User</router-link>
<!--渲染结果-->
<a data-v-acf16c92="" href="#/" class="router-link-active">User</a>

<router-link :to="{ path: '/link', query: { myName: '李古拉雷' }}">User</router-link>
<!--渲染结果-->
<a data-v-acf16c92="" href="#/link?myName=%E6%9D%8E%E5%8F%A4%E6%8B%89%E9%9B%B7" class="">User</a>
两种写法渲染出来两种不同的传参方式,看起来好像一种是post传参,一种是get传参。
但是这两种方式接受参数的方式却是一样的
第一种:this.$router.params.myName
第二种:this.$router.query.myName

tag:这个属性就是决定最终渲染成什么标签的,因为默认值是 a,所以router-link的默认渲染成<a></a>标签,如果我把tag设置成li,我们看一下会渲染成什么,
<router-link tag="li">User</router-link>
<!--渲染结果-->
<li data-v-acf16c92="" class="">User</li>
就是一个li标签,但是一样会监听点击事件,触发路由导航。
还有些其它更好完的属性,但是,不是本部分的介绍范围,我们此处只介绍怎么传递参数,有兴趣的自行前往:https://router.vuejs.org/zh/api/#router-link-props

3.路由命名有什么用

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值