Vue-router

最新推荐文章于 2020-08-06 18:31:03 发布

昵称：小小

最新推荐文章于 2020-08-06 18:31:03 发布

阅读量236

点赞数

分类专栏： vue-router 文章标签： vue-router

vue-router 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Vue-router

Vue-router入门
- 第1节：Vue-router入门
vue-router配置子路由
- 一、改造App.vue的导航代码
- - App.vue
- 二、改写 components/Hi.vue页面
- - components/Hi.vue
- 三、在conponents目录下新建两个组件模版Hi1.vue和Hi2.vue
- - Hi1.vue
  - Hi2.vue
- 四、修改router/index.js代码
第3节：vue-router如何参数传递
- 一、用name传递参数
- - router/index.js
  - App.vue
- 通过标签中的to传参
第4节：单页面多路由区域操作
第5节：vue-router利用url传递参数
- :冒号的形式传递参数
- 正则表达式在URL传值中的应用
第6节：vue-router的重定向-redirect
- redirect基本重定向
- 重定向时传递参数
alias别名的使用
路由的过渡动画
- 标签
- CSS过渡类名
- 过渡模式mode:
- - 标签
第9节：mode的设置和404页面的处理
- mode的两个值
- 404页面的设置
第10节：路由中的钩子
- 路由配置文件中的钩子函数
- 写在模版中的钩子函数
第11节：编程式导航
- this.$routergo(-1)和this.$routergo(1)
- this.$router.push('/xxx')

Vue-router入门

犹豫Vue在开发时对路由支持不足，后来官方补充了vue-router插件。
我们用Vue做的都是单页应用，相当于只有一个主的index.html页面，所以写的<a></a>标签是不起作用的，必须要用vue-router进行管理。

第1节：Vue-router入门

vue-router

vue-router是一个插件包，需要用npm来进行安装，进入项目目录，输入命令。

npm install vue-router --save-dev

使用cnpm会快得多，如果你已经在vue-cli中已经安装vue-router，这里就不需要重复安装了。

解读router/index.js文件

我们使用vue-cli生产项目结构，你可以找到src/router/index.js文件，这个文件就是路由的核心文件。下面看一下里面的内容。

01 	import 	Vue from 'vue'	//引入Vue
02	import Router from 'vue-router'	//引入vue-router
03 	import 	HelloWorld from '@/components/HelloWorld'	//引入根目录下的HelloWorld.vue组件
04	
05	Vue.use(Router) 	//全局使用Router
06
07	export default new Router({
08		routes: [			//配置路由，这里是个数组
09			{					//每一个链接都是一个对象
10				path: '/',	//链接路径
11				name: 'HelloWorld',	//路由名称
12				component: HelloWorld //对应的组件模版
13			}		
14		]		
15	})

这段代码的功能就是在进入时，显示HelloWorld里面的代码内容。

###增加一个Hi的路由和页面
熟悉核心文件后，我们试着增加一个路由配置，当在地址栏输入http://localhost:8080/#/hi的时候会出现新的页面，效果如下在这里插入图片描述
如何实现：

在src/components目录下，新建Hi.vue文件。
编写内容，其中包括<template>,<script>和<style>三个部分

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'h1',
    data () {
        return {
            msg: 'Hi, 我是可爱的小仙女。'
        }
    }
}
</script>

<style scoped>

</style>

引入Hi组件：在router/index.js中引入

import Hi  from '@/components/Hi'

增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象。

｛
	path: '/hi',
	name: 'Hi',
	component: Hi
	｝

这样就实现了增加一个新的页面。
路由配置文件的完整代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'

Vue.use(Router)

export default new Router({
	routes: [
		{
			path: '/',
			name: 'HelloWorld',
			component: HelloWorld
		},{
			path: '/hi',
			name: 'Hi',
			component: Hi
			}
	]
})

router-link制作导航

现在，在页面上有个导航链接，当我们点击，可以实现页面内容的变化。制作链接需要标签，他的语法是：

<router-link to="/">[显示字段]</router-link>

to:是我们的导航路径，要填写的是你在router/index.js文件里配置的path的值，默认首页，也就是to='/',
［显示字段］：就是我们希望显示给用户的导航名称，比如首页，注册…
下面在src/APP.vue文件中的template里添加代码

<p>导航 ：
   <router-link to="/">首页</router-link>
   <router-link to="/hi">Hi页面</router-link>
</p>

效果就出来了：
在这里插入图片描述
总结：对vue-cli构建下的vue-router有了基本的了解，学习了vue-router的核心文件的基本结构，以及如何添加新的模版，并使用<vue-link>设置导航。

vue-router配置子路由

子路由的情况一般用在一个页面有他的基础模版，然后他下面的页面都隶属于这个模版，只是改变部分样式。
实例：在Hi页面的下面新建两个字页面，分别是“Hi1”和“Hi2”页面，来实现子路由。

一、改造App.vue的导航代码

这里改造App.vue的导航发代码，实现导航功能，用标签增加两个新的导航链接。

App.vue

<p>导航：
		<router-link to ="/">首页</router-link>|
		<router-link to = "/hi">Hi页面</router-link>|
		<router-link to ="/hi/hi1">Hi页面1</router-link>|
		<router-link to ="/hi/hi2">Hi页面2</router-link>
</p>

效果如下：在这里插入图片描述

二、改写 components/Hi.vue页面

将Hi.vue改成一个通用的模版，加入<router-view>标签，给子模版提供插入位置。“Hi页面1”和“Hi页面2”都相当于“Hi页面“的子页面，有点像继承关系。

components/Hi.vue

只是添加一行代码，其他不变

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>

		<router-view class="aaa"></router-view>	//插入的代码
	</div>
</template>

<script>
export default {
	name: 'hi',
	data (){
		return {
			msg: 'Hi,I am JSPang'
		}
	}
}
</script>

<style scoped>

</style>

三、在conponents目录下新建两个组件模版Hi1.vue和Hi2.vue

新建的模版和Hi.vue没有太多差别，只是data中的message值改变

Hi1.vue

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
	</div>
</template>

<script>
export default {
	name: 'hi',
	data () {
		return {
			msg: 'Hi,I am Hi1!'
		}
	}
}
</script>

<style scoped>
</style>.

Hi2.vue

<template>
	<div>
		<h1>{{ msg }}</h1>
	</div>
</template>

<script>
export default {
	name: 'hi',
	data ( ) {
		return {
			msg: 'Hi,I am hi2!'
		}
	}
}
</script>

<style scoped>

</style>

四、修改router/index.js代码

现在有了导航，母模版和子模版也有了，只要改变路由的配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

children: [
{path:'/',component:xxx},
{path:'xx',component:xxx}
]

children字段后边跟的是个数组，数字里面和其他路由配置基本相同，需要配置path和component。（注意children拼写不要出错）,具体看一下这个子路由的配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
	routes: [
		{
			path: '/',
			name: 'HelloWorld',
			component: HelloWorld
		},{
			path: '/hi',
			component: Hi,
			children: [
				{path: '/',component: Hi},
				{path: '/hi1',component:Hi1},
				{path: '/hi2',component:Hi2}
			]
		}
	]
})

当我们做一个购物模块，购物模块里有很多相同的元素，就可以利用子路由的形式，先定一个父页面，然后修改子页面。

第3节：vue-router如何参数传递

参数的传递是最基本的业务需求，当我们点击导航菜单时，跳转页面能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。

一、用name传递参数

两步完成用name传值并显示在模版里：

router/index.js

配置name属性

routes: [
{
	path: '/',
	name: 'Hello,这是name传值',
	component：HelloWorld
}
]

App.vue

使用$route.name接收，比如直接在模板中显示：

<p>{{ $route.name }}</p>

通过标签中的to传参

这里需要对to进行一个绑定，写成:to。基本语法如下：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

name:就是我们在路由配置文件中起的name值
params:要传的参数，是对象形式，在对象里可以传递多个值

App.vue

<router-link :to="{name:'hi1',params:{username:'sunnyday'}}">Hi页面1</router-link>

router/index.js

{path: '/hi1',name: 'hi1',component: Hi1}

Hi1.vue

使用$route.params.username接收

{{ $route.params.username }}

第4节：单页面多路由区域操作

在一个页面里我们有2个以上<router-view>区域，通过配置路由的js文件，来操作这些区域的内容。例如，我们在App.vue里加上两个<router-view>标签，并加入CSS样式。

App.vue

<router-view></router-view>
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:30px"></router-view>

现在页面中有了三个标签，我们需要在路由里配置这三个区域，配置主要在components字段里进行

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router ({
	routes: [
		{
			path: '/',
			components: {
				default: HelloWorld,
				left:Hi1,
				right:Hi2
			}
		},{
			path: '/Hi',
			components: {
				default: HelloWorld,
				left: Hi2,
				right:Hi1
			}
		}
	]
})

上面的代码我们编写了两个路径，一个是默认的‘/’，另一个是‘/Hi‘，在这两个路径下面的components里面，我们对三个区域都定义了显示内容，之后在component文件夹下，新建Hi1.vue和Hi2.vue页面。

Hi.vue

<template>
	<div>
		<h2>{{ msg }}</h2>
	</div>
</template>

<script>
export defult {
	name: 'hi1',
	data ( ) {
		return {
			msg: 'I am Hi1 page.'
		}
	}
}
</script>

Hi2.vue

<template>
	<div>
		<h2>{{ msg }}</h2>
	</div>
</template>

<script>
export default {
	name: 'hi2',
	data ( ) {
		return {
			msg: 'I am Hi2 page'
		}
	}
}
</script>

最后在App.vue中配置

App.vue

<router-link to='/'>首页</router-link>|
<router-link to='/hi'>Hi页面</router-link>

效果图：
在这里插入图片描述

第5节：vue-router利用url传递参数

新闻列表中有许多新闻标题整齐的排列，我们点击每个新闻标题打开不同的新闻内容，这时候在跳转路由时跟上新闻编号就十分实用。

:冒号的形式传递参数

我们可以在路由的配置文件里以:冒号的形式传递参数，这就是对参数的绑定。

router/index.js

{
	path: '/params/:newsId/:newsTitle',
	component:Params
}

我们需要传递的参数是IDnewsId和新闻标题newsTitle，所以在路由配置文件制定了这两个值。

components/params.vue

在components目录下建立params.vue组件（页面），然后在页面里输出url传递的新闻ID和新闻标题。

<template>
	<div>
		<h2>{{ msg }}</h2>
		<p>新闻ID: {{ $route.params.newsId }}</p>
		<p>新闻标题: {{ $route.params.newsTitle }}</p>
	</div>
</template>

<script>
export default {
	name: 'params',
	data ( ) {
		return {
			msg: 'params page'
		}
	}
}
</script>

App.vue

在文件中加入标签，这时候就可以直接利用url传值了。

<router-link to="/params/198/My website is so pretty">params</router-link>

效果图：在这里插入图片描述

正则表达式在URL传值中的应用

现在我们希望传递的新闻ID只能是数字的形式，这时候需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则需要在router/index.js中以园括号的形式加入

path: '/params/:newsId(\\d+)/:newsTitle'

加入了正则，我们在传递数字以外的其他参数，params.vue组件就无法接收到。

第6节：vue-router的重定向-redirect

我们设置的路径不一致，但是我们希望跳转到用一个页面，或者说是打开同一个组件，这里就用到路由的重定向redirect参数。

redirect基本重定向

只需把router/index.js中的component换成redirect参数。简单配置一下：

export default new Router ({
	routes: [
		{
			path: '/',
			component: HelloWorld
		},{
			path: '/params/:newsId(\\d+)/:newsTitle',
			component: Params
		},{
			path: '/goback',
			redirect: '/'
		}
	]
})

这里设置了goback路由，但是他并没有配置任何的component（组件），而是直接redirect到path：‘/‘下了，这就是一个简单的重新定向。

重定向时传递参数

重定向时需要传递参数，我们需要在redirect后边的参数里复制重定向路径的path参数。

{
	path: '/params/:newsId(\\d+)/:newsTitle',
	component:Params
},{
	path: '/goParams/:newsId(\\d+)/:newsTitle',
	redirect: '/params/:newsId(\\d+)/:newsTitle'
}

已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方式和正常路由接收方式一样。

alias别名的使用

使用alias别名的形式，也可以实现类似重定向的效果。

router/index.js

给hi1路径起一个别名，sunsmile。

path: '/hi1',
component: Hi1,
alias: '/sunsmile'

App.vue

起过别名之后，可以直接使用标签的to属性，进行重新定向

<router-link to ="/sunsmile">alias别名重定向</router-link>

redirect 和alias的区别

redirect: 观察url,redirect是直接改变了urL的值，把url变成了真实的path路径。
alIas:url路径内容没有被改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。

填坑

别名不要在path为’/'下使用，vue不支持。

{
	path: '/',
	component: HelloWorld,
	alias: '/home'
}

路由的过渡动画

在页面切换时加入动态效果，提升我们程序的动效设计（也就是看着好看）。

CSS过渡类名

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=“fade”,会有如下四个类名：

fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡完成后移除
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除
fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除

可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的trasition属性在这两个类下进行设置。

具体实现：

.fade-enter {
opacity: 0;
}
.fade-leave {
opacity: 1;
}
.fade-enter-active {
transition: opacity .5s;
}
.fade-leave-active {
transition: opacity .5s;
}

上面的代码设置了改变透明度的动画过渡效果，默认的mode是in-out模式，学习一下mode模式。

过渡模式mode:

in-out:新元素先进入过渡，完成后当前元素过渡离开
out-in:当前元素先行过渡离开，离开完成后新元素过渡进入。

第9节：mode的设置和404页面的处理

在过渡效果中，有mode的设置，但是在路由的属性中还有一个mode。

mode的两个值

history:当你使用history模式时，url就是正常的url
hash：默认‘hash’值，但是hash看起来就像无意义的字符排列，不好看也不符合一般的浏览习惯。

404页面的设置

用户输错页面时，我们给他一个友好的提示，也就是404页面，vue-router提供了这样一个机制。

配置router/index.js

{
	path: '*',
	component:Error
}

这里的path: '*'就是找不到页面时的配置，接下来在component下新建404页面：

Error.vue

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

3.配置App.vue

用瞎写一个标签的路径

<router-link to="/bbbbbb">ghost
</router-link>

预览一下我们现在的结果，就已经实现404页面的效果
在这里插入图片描述

第10节：路由中的钩子

一个组件从进入到销毁有很多钩子函数，同样在路由中也设置了钩子函数。路由中的钩子函数可以写在路由的配置文件中，也可以写在组件模版中，下面学习两种钩子函数的写法。

路由配置文件中的钩子函数

在路由文件中只能写一个beforeEnter，就是在进入此路由配置时。

{
	path:'/params/:newId(\\d+)/:newsTitle',
	component:Params,
	beforeEnter:(to,from,next)=>{
		console.log('我进入了params模版');
		console.log(to);
		console.log(from);
		next();
	}
}

我们在params路由里配置了beforeEnter的钩子函数，函数采用了ES6的箭头函数，需要传递三个参数。在箭头函数中打印了to和from函数

三个参数：

to:路由将要跳转的路径信息，信息是包含在对象里的
from：路径跳转前的路径信息，也是一个对象的形式
next:路由的控制参数，常用的有next(true)和next(false)

写在模版中的钩子函数

这里有两个钩子函数可以使用

beforeRouterEnter:在路由进入前的钩子函数
beforeRouterLeave:在路由离开前的钩子函数

export default {
	name: 'params',
	data ( ) {
		return {
			msg: 'params page'
		}
	},
	beforeRouterEnter:(to,from,next)=>{
		console.log("准备离开路由模版");
		next( );
	},
	beforeRouterLeave: (to,from,next)=>{
		console.log("准备离开路由模版");
		next();
	}
}

第11节：编程式导航

之前的导航是用标签或者是直接操作地址栏的形式，而编程式导航就是在业务逻辑代码中实现导航

this. $r o u t e r g o (- 1) 和 t h i s .$ routergo(1)

这两个编程式导航的意思是后退和前进，比如条件不满足时，我们需要后退。
router.go(-1)代表后退，我们也可以让我们的导航进行后退，并且地址栏也是有变化的。

我们先在app.vue文件里加入一个按钮，按钮绑定一个goback( )方法。

<button @click="goback">后退</button>

在script模版中写入goback( )方法，并使用this.$router.go(-1),进行后退操作。

<script>
export default {
	name: 'app',
	methods: {
		goback( ) {
			this.$router.go(-1);
		}
	}
}
</script>

router.go(1)：代表前进，用法和后退一样

this.$router.push(’/xxx’)

这个编程式导航的作用是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都要用到这个编程的方法来操作路由。

我们设置一个按钮，点击按钮回到站点首页。

先编写一个按钮，在按钮上绑定goHome( )方法

<button @click="goHome">回到首页</button>

在script模版中加入goHome方法，并用this.$router.push('/')导航到首页

export default {
	name: 'app',
	methods: {
		goback( ){
			this.$router.go(-1);
		},
		goHome( ){
			this.$router.push('/');
		} 
	}
}

昵称：小小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router

Vue-routerVue-router入门第1节：Vue-router入门vue-router解读router/index.js文件router-link制作导航vue-router配置子路由.editorconfigpackage.json.babelrc解读Vue-cli的模板main.js文件解读App.vue文件Hello.vue文件解读Vue-router入门犹豫Vue在开发时对路...
复制链接

扫一扫