vue基础篇 11 Vue-Router

最新推荐文章于 2022-10-25 14:57:07 发布

LeyoBiang

最新推荐文章于 2022-10-25 14:57:07 发布

阅读量149

点赞数

分类专栏： vue 前端文章标签： vue js javascript es6 html5

本文链接：https://blog.csdn.net/qilie_32/article/details/114808844

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

11 Vue-Router

介绍

路由器提供了两种机制: 路由和转送.
- 路由是决定数据包从来源到目的地的路径.
- 转送将输入端的数据转移到合适的输出端.
路由中有一个非常重要的概念叫路由表.
- 路由表本质上就是一个映射表, 决定了数据包的指向

安装

步骤

安装vue-router
```
npm install vue-router --save
```

在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

导入路由对象，并且调用Vue.use(VueRouter)

./src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

创建路由实例，并且传入路由映射配置

./src/router/index.js

//定义路由
const routes=[]
//创建router实例
const router = new VueRouter({
    routes
})
//导出router实例
export default router

在Vue实例中挂载创建的路由实例

./src/main.js

import router from './router'

new Vue({
    el:'#app',
    router,
    render:h => h(app)
})

使用vue-router的步骤

创建路由组件

./src/components/cpmRouter1.vue

<template>
	<div>
		<h2>h21</h2>
		<p>p1</p>
	</div>
</template>

<script>
	export default {
		name:'cpmRouter1'
	}
</script>

<style>
    
</style>

./src/components/cpmRouter2.vue

<template>
	<div>
		<h2>h22</h2>
		<p>p2</p>
	</div>
</template>

<script>
	export default {
		name:'cpmRouter2'
	}
</script>

<style>
</style>

配置路由映射：组件和路径映射关系

.src/router/index.js(添加、修改)

import cpm1 from '../components/cpmRouter1.vue'
import cpm2 from '../components/cpmRouter2.vue'

//诸如插件
Vue.use(VueRouter)

//定义路由
const routes=[
	{
		path:'/cpm1',
		component:cpm1
	},
	{
		path:'/cpm2',
		component:cpm2
	}
]

通过和使用路由

补充

设置首页

我们在routes中又配置了一个映射.
path配置的是根路径: /

redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

const routes=[
	{
		path:'/',
		redirect:'/cpm1'
	},
	{
		path:'/cpm1',
		component:cpm1
	},
	{
		path:'/cpm2',
		component:cpm2
	}
]

改变路径的方式

在讲js的时候提到过有两种改变路径的方式

URL的hash
HTML5的history

默认情况下, 路径的改变使用的URL的hash

//创建router实例
const router = new VueRouter({
    routes,
    mode:'history'
})

router-link补充

在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
还有一些其他属性:
- tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
- 元素, 而不是
- replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
- active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
  - 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
  - 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
  - router实例中的linkActiveClass属性的修改同样可以修改默认的名称
```
const router = new VueRouter({
    routes,
    mode:'history',
    linkActiveClass:'cpm'	
})
```

路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

例子

<template>
  <div id="app">
    <button @click="linkToCpm1">cpm1</button>
    <button @click="linkToCpm2">cpm2</button>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
	methods:{
		linkToCpm1(){
			this.$router.push('/cpm1')
		},
		linkToCpm2(){
			this.$router.push('/cpm2')
		}
	},
  components: {
  }
}
</script>

效果和用router-link一致，只是将链接变为button

动态路由

作用

在某些情况下，一个页面的path路径可能是不确定的，这时候就需要动态路由

例子

根据input框中的文字改变URL

./src/components/user.vue

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

<script>
	export default {
		name:'user'
	}
</script>

<style>
</style>

./src/router/index.js

import user from '../components/user.vue'
const routes=[
	{
		path:'/',
		redirect:'/cpm1'
	},
	{
		path:'/cpm1',
		component:cpm1
	},
	{
		path:'/cpm2',
		component:cpm2
	},
	{
		path:'/user/:id',
		component:user
	}
]

./src/App.vue

<template>
    <input type="text" v-model="userName" @keyup.enter="enterRefreshUserName()"/>
</template>
<script>

export default {
  name: 'App',
  data(){
	return {
	  userName:''
	}
  },
  methods:{
    enterRefreshUserName(){
      this.$router.push('/user/'+this.userName)
    }
  }
}
</script>

路由懒加载

作用

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

用法

这种方法用到ES6的箭头函数，十分方便快捷

const routes=[
	{
		path:'/cpm1',
		component:()=>import('../components/cpmRouter1.vue') 
	}
]

嵌套路由

步骤

创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.

代码

./src/components/cpmRouter1.vue

<template>
	<div>
		<h2>h21</h2>
		<p>p1</p>
		<button @click="linkToChild1">child1</button>
		<button @click="linkToChild2">child2</button>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'cpmRouter1',
		methods:{
			linkToChild1(){
				this.$router.push('../cpm1/child1')
			},
			linkToChild2(){
				this.$router.push('../cpm1/child2')
			},
		}
	}
</script>

<style>
</style>

.src/router/index.js

const routes=[
	{
		path:'/',
		redirect:'/cpm1'
	},
	{
		path:'/cpm1',
		component:()=>import('../components/cpmRouter1.vue') ,
		children:[
			{
				path:'child1',
				component:()=>import('../components/cpmRouterChild1.vue')
			},
			{
				path:'child2',
				component:()=>import('../components/cpmRouterChild2.vue')
			}
		]
	}
]