vue-router基础
安装vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录
输入npm install vue-router --save-dev
在安装vue-cli时，会有提示问你要不要安装vue-router,装过就不用再装了
解读router/index.js文件
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板名称，就是上面import定义的那个Hello
}
]
})
简单使用
** 增加一个Hi的路由和页面 **
对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi
在src/components目录下，新建 Hi.vue 文件。
编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>
![image-20210128171426917]()
然后在router/index.js文件下面配置
引入 Hi组件：
import Hi from '@/components/Hi'
增加路由配置，在router/index.js文件的routes[]数组中，新增加一个对象
{
path:'/hi',
name:'Hi',
component:Hi
}
router-link制作导航
语法规则：
<router-link to="/">[显示字段]</router-link>
to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
[显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页。
配置子路由
子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式
接着上面的Hi页面，我们继续在component/ 目录下创建同样的和Hi同样的模板，命名为Hi1，Hi2
修改router/index.js代码
children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。
{
path: '/Hi',
name: "Hi",
components: {
default: Hi,
left: Hi1,
right: Hi2
},
children: [{
path: "/Hi1",
name: 'Hi1',
component: Hi1
}, {
path: '/Hi2',
name: 'Hi2',
component: Hi2
}]
}
记得在顶部引入Hi1和Hi2
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
vue-router 传递参数
用name传递参数
首先在路由文件src/router/index.js里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
然后模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
<p>{{ $route.name}}</p>
用<router-link> 标签中的to传参
基本语法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
在App.vue中添加router-link
<router-link :to="{name:'Hi',params:{author:'xmlt'}}">Hi 页面</router-link>
在Hi.vue中接收参数
<template>
<div>
<h1>{{message}} {{$route.params.author}}</h1>
</div>
</template>
<script>
export default {
name:'hi',
data(){
return {
message:"Hi , I'm Lisa "
}
}
}
</script>
<style scoped></style>
用url传递参数
首先url传递参数需要在index.js文件配置路由时就把键名写在路径里
{
path:'/params/:newsId/:newsTitle',
component:Params
}
然后在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的newsID和newsTitle。
<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中用router-link引入键值
<router-link to="/params/198/jspang website is very good">params</router-link>
正则表达式在URL传值中的应用
传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
path:'/params/:newsId(\\d+)/:newsTitle',
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。甚至会导致其他的内容无法渲染
单页面多路由区域操作
在一个页面里我们有2个以上`<router-view>`区域，我们通过配置路由的js文件，来操作这些区域的内容。
首先在App.vue中创建两个或两个以上的router-link，设置一些样式便于区分
<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:300px;"></router-view>
然后在index.js中配置多路由
export default new Router({
routes: [
{
path: '/',
components: {
default:Hello,
left:Hi1,
right:Hi2
}
},{
path: '/Hi',
components: {
default:Hello,
left:Hi2,
right:Hi1
}
}
]
})
//这样router-view name="left"的区域就显示Hi2.vue的内容，router-view name="right"显示Hi1.vue
重定向 redirect
我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了
export default new Router({
routes: [
{
path: '/',
component: Hello
},{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goback',
redirect:'/'
}
]
})
这样的话，<router-link to="/goback">goback实际上时Hello</router-link>点击后就会去到Hello页面
或者在地址栏中输入localhost://8080/#/goback 就会去到Hello页面
重定向时传递参数
只需要在ridirect后边的参数里复制重定向路径的path参数就可以了
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。
别名 alias
使用alias别名的形式，我们也可以实现类似重定向的效果。
首先我们在路由配置文件里（/src/router/index.js）
{
path: '/HHH',
name: "HHH",
components: {
default: Hi,
left: Hi2,
right: Hi1
},
alias: '/xmlt'
}
<router-link < to="/xmlt">jspang</router-link>就会跳转到/HHH页面
redirect和alias的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
别名请不要用在path为’/’中，如下代码的别名是不起作用的
{
path: '/',
component: Hello,
alias:'/home'
}
过渡动画
过渡动画使用css中的translation标签来制作
想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。
注意，一个translation标签内部只能有一个<router-view>
例：
<transition name="fade">
<router-view ></router-view>
</transition>
我们在/src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade（这里的名字可以任意）
css过渡类名 ：组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：
fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
上边的代码设置了改变透明度的动画过渡效果，但是默认的mode模式in-out模式，这并不是我们想要的。
in-out模式会导致先加载后移出，如果后移出的DOM元素后面还有别的元素就会导致不移出的元素顶上去，很恼火
过渡模式mode：
in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
<transition name="fade" mode="out-in">
<router-view name="right" style="float:left;height:300px;width:50%;background-color:#c00"></router-view>
</transition>
mode的设置和404页面的处理
mode的三个值
histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，url里不含#/
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。url含#/
abstract: 地址栏里的url不会随着页面的改变而改变
配置位置
![image-20210128191451953]()
404页面
凡是没有在index.js里注册过的路径我们都可以使用*来代替
{
path: '*',
component: error
}
地址栏输入错误、不存在的路径都会把链接转向 * 所在的error页面
之后我们再制作一个error页面来输出相关信息就可以了
<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name:'error',
data(){
return{
msg:'Not found 404'
}
}
}
</script>
<style scoped></style>
路由中的生命周期函数（钩子函数）
路由配置文件index.js中的钩子函数
我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。只有一个钩子函数
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。
三个参数：
to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。必须有next()
写在模板中的钩子函数
写在模板中就可以有两个钩子函数可以使用
beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
}
</script>
写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。
编程式导航
this.$router.go(-1) 和 this.$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>
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('/');
}
}
}
浙公网安备 33010602011771号