vue-router使用 看着篇就够了

李古拉雷 2020-11-12 23:49:39
vue vue-router 使用 router 看着


官网地址: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.路由命名有什么用

 

版权声明
本文为[李古拉雷]所创,转载请带上原文链接,感谢
https://blog.csdn.net/honglei_zh/article/details/89029769

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple