vue-router路由管理器的使用

vue-router路由管理器的使用

一.vue-router路由入门

1.什么是router(路由)?

这里的路由并不是指我们平时所说的硬件路由器,在vue里是指单页应用的路径管理器,再通俗点来说,vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。
接着上一篇vue-cli里的vueclitest继续操作:
因为vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令:

cnpm install vue-router --save-dev

2.打开src/router/index.js文件可以看到以下内容:

import Vue from 'Vue';//引入Vue
import VueRouter from 'vue-router';//引入vue-router,这里的对象名可以自己定义,但定义后下面全局包括new都要使用同一个名字
import HelloWorld from "@/component/Hello";//引入HelloWorld.vue组件

Vue.use(VueRouter);//全局使用vue-router
export default new VueRouter({//暴露一个路由对象,相当于官网里面的3.实例化路由对象
routes:[//路由配置,是数组
{//每一个规则都是一个对象
path:'/',//链接路径
name:''HelloWorld'',//路由名字
component:HelloWorld //对应的组件模板
}
]
})

上面的path的意思是:在根目录下关联的是HelloWorld这个组件.new VueRouter是实例化路由对象

3.根据上面的案例,我们再写一个hi的组件:

第一步:根据HelloWorld.vue,我们创建一个hi.vue组件,内容如下:

<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
 export default {
     name:'hi',
     data() {
         return {
             message:'我是hi页面'
         }
     },
 }
</script>
<style>

</style>

回到router/index.js页面
第二步:引入hi.vue组件

import hi from "../components/hi.vue"

第三步:再增加一个路由规则:

{
path:"/hi",
name:'hi',
component:hi
}

最终打开http://localhost:8080/#/hi,显示如下:

4.使用router-link制作一个简单的导航

回到App.vue大组件页面:增加两个router-link标签,使用to分别跳转到首页和hi页面.

最后实现效果:

5.附上官网路由案例:

操作步骤:

0.定义一个html结构:

    <div id="app">
        <!-- 入口:使用router-link组件来导航,它会解析为a标签 -->
        <router-link to="/man">男</router-link>
        <router-link to="/women">女</router-link>

        <!-- 出口:渲染内容 -->
        <router-view></router-view>
    </div>

先导入vue和vue-router文件,可以自己下载在本地导入,但前后文件不能颠倒,要先导入vue在vue-router,不然会报错,官方在线导入如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

1.写组件

//也可以使用import XX from './XX'从其它文件中引进来
      const Man= {//对象
            template:'<div>我是男生</div>'
        };
        const Women={
            template:'<div>我是女生</div>'
        };

2.写路由规则(配置路由单词用的是routes),里面写path路径和component组件

        const routes =[//数组,里面存对象,可以是多个对象,中间用逗号隔开
            {
                path:"/man",//写to的路径名
                component:Man//写组件名
        },
        {
            path:"/women",
            component:Women
        }
        ]

3.实例化路由对象,传入定义的路由规则(路由对象单词是用的router)

    const router =new VueRouter({//里面传入对象
            routes//相当与于routes:routes
            // routes:routes123//属性名一定要routes,这是作者规定的,值名可以自己定义和路由规则一样就可以了

        })

4.实例化Vue对象,把元素和路由对象传入到Vue实例中

        let app=new Vue(
            {
                el:"#app",
                router //路由对象
            }
        )

案例效果:

二.制作一个子路由(项目中经常用,很重要)

子路由一般用在一个页面有自己的基础模板,然后在它的下面的页面都属于这个模板,只是部分改变样式.
如下图,我们要实现首页下面拥有首页样式的两个子页面.

操作步骤如下:
1.在App.vue入口文件里面,增加三个首页,子页面1,子页面2的router-link标签,在to属性里,写上各自要跳转的地址.

<router-link to="/">首页</router-link>
<router-link to="/hi1">子页面1</router-link>
<router-link to="/hi2">子页面2</router-link>

2.在components文件夹里创建两个hi1和hi2组件

3.回到router/index.js里,在路由文件里引入上面两个组件;

import hi1 from "../components/hi1";
import hi2 from "@/components/hi2.vue"

4.在路由规则里加上children里用path(关联router-link的to值)和component(关联组件名)绑定;

5.回到components/main.vue首页,将子组件的出口用router-view渲染在主页面即可.

三.vue-router如何参数传递

1.用name传递参数(这种方法很少用)

分为两步:
a.在src/router/index.js里面配置name属性;
b.在src/App.vue模板里用$route.name的形式接收就好;

注意点:如果路由里面还有子路由,不用写name,如果写name控制台会提示.如下图(这图相当于一个面包屑导航):

2.利用router-link中的to标签(这种方法常用,而且可以传递多个值)

比如有一个需求:我们要将App.vue里面的username和id传递到模板,最后在页面中显示.操作方法如下:
a.在App.vue页面的router-link标签里用to进行绑定,

<router-link :to={name:XXX,params:{username:'JSPang',id=888}}>

说明:
to:注意to一定要加冒号进行绑定,里面是对象的形式;
name:要和我们在路由规则文件中的name值保持一致;

params:这里就是我们要传的参数,是对象形式,里面可以传递多个值.
b.回到要hi11.vue组件模板,在模板里用插值模板的$route.params.username进行接收

{{$route.params.username}}

整体操作图如下:

3.还有一种是老程序员用url传递参数的方法,详见第五节
以上路由传参主要是使用第二种方法,
同时总结路由中name的两个作用:
1.用name来传递参数;
2.在router-ling的to传参时起到名称的作用.

四.单页面多路由区域操作(这在项目中开发很常见,要掌握哦)

需求:在一个页面我们有2个以上router-view区域,并且输入不同的网址下面显示不一样的内容,我们可以通过配置路由的js文件来操作这些区域的内容,操作过程如下
1.新建一个vuerouter项目,新建命令如下:

vue init webpack vuerouter

2.在src/App.vue里新建两个router-view标签,并各自命名

    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>

3.在components/Hello.vue(把HelloWorld组件名字改为Hello),并删掉里面多余的内容,只留如图:

4.在components文件夹里新建两个Hi1和Hi2页面;

5.在router/index.js引入Hi1和Hi2组件:

import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

6.在router/index.js里面写路由配置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      components: {//特别留意这里是复数,单数的话会报错
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    }

  ]
})

注意:componets要写复数,left是对应router-view里的name值.

上面实现效果:

7.回到App.vue我们给它加点样式:

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

变成如下效果:

8.回到router/index.js里,增加一个路由配置,并修改里面的path和颠倒left和right里的值.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      components: {//特别留意这里是复数,单数的话会报错
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },
    {
      path:"/jspang",
      name:"Hello",
      components:{
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }

  ]
})

最后我们在浏览器里输入带有jspang的网址时内容就变了.

五.vue-router利用url传递参数

在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。操作步骤如下:
1.在router/index.js里,准备好路由配置,在path里面,传递参数的格式用冒号进行绑定键

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

import Params from "@/components/params"


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      components: Hello
    },
    {
      path:"/params/:newsId/:newsTitle",//传递参数的格式:冒号(进行绑定)跟上键
      component:Params
    }
    

  ]
})

2.回到App.vue里面,增加两个router-link标签,在to里面跟上参数,写的格式/键值1/键值2(与上面绑定的userId和newsTitle保持一致)

 <router-link to="/">home</router-link>
 <router-link to="/params/198/jspang website is very good">params</router-link>   

3.回到src/components/params页面用插值方式渲染页面,格式:{{$route.params.键名}}

<p>newsId:{{$route.params.newsId}}-newsTitle:{{$route.params.newsTitle}}</p>

$route.params里面的内容:就是是一个对象,里面存了上面的内容.

最终显示效果如下:

上面有一个问题,我们可以把newsId改为aaa,也能传递,但这是不对的,我们怎样限定只能传递数字呢?方法如下:
其实很简单,
只需在path里面键后加括号,里面写上正则就行

path:"/params/:newsId(/\d+/)/:newsTitle",//传递参数的格式:冒号(进行绑定)跟上键

/\d+/:是正则,限定只能数字.
这样的结果如果还是aaa,内容就无法显示了(地址有,但页面无法显示)

六,七.vue-router的重定向(redirect)和别名(alias).

1.redirect重定向

a.开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。重定向redirect操作如下:

只需在/src/router/index.js中,我们把原来的component换成redirect参数就可以了

b.我们重定向是如果也要传递参数怎么操作?首先,path里面正常写地址和要跟的参数,另外我们需要在redirect后面的参数里复制重定向路径的path参数就可以了.


附官网重定向知识:

2.alias别名

上节学习了路由的重定向，我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。
先创立一个Hi1组件;

a.我们在router/index.js里,Hi1路由配置的component后面加上alias,后面跟上一个别名jspang.

    {
      path:"/Hi1",
      component:Hi1,
      alias:"/jspang"
    },

b.回到App.vue里,增加一个router-link标签,在to里跟上别名值

 <router-link to="/jspang">jspang</router-link>

实现效果:

总结重定向和别名的区别:
redirect重定向:是改变了真实的url地址,使之显示原来的页面.
alias别名:url地址没有改变,只是router-view内容显示了原来真实的页面.
从体验角度来说,别名的体验会更好.

八.路由的过渡动画

1.要想过渡有动画,在App.vue里增加transition标签,里面要定义name属性

<transiton name="v" mode="out-in">
	<router-view></router-view>
</transition>

说明:
mode是过渡的模式:
in-out(默认状态):新元素先过渡进入,完成后老元素过渡离开;
out-in:老元素先过渡离开,完成后新元素过渡进入;
这次我们用mode的out-in模式

2.写CSS样式

组件过渡过程中,会有6个CSS样式类名进行切换,这6个类名与transition的name属性有关,比如name=“v”,会有如下6个类名:

所以我们写样式如下:

.v-enter{
  opacity: 0;
  /* o代表透明 */
}
.v-enter-active{
  transition: opacity .5s;

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

最终打开不同的页面就自然有过渡效果了.

九.路由配置中mode的设置和404页面的处理.

在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。

1.路由配置中mode有两个值:

一个是histroy,URL是正常的地址,没有带#;
另一个是hash(默认值),根目录会多个"#";

2.404页面

用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.操作过程如下:
1.设置路由配置
引入组件:

import Error from "@/components/404.vue"

配置路由

{
path:"*",
component:Error
}

这里的path:’*’就是找不到页面时的配置
2.新建一个404.vue页面

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

3.在App.vue里用router-link瞎写一个标签的路径

<router-link to="/bbbb">我是瞎写的</router-link>

最终效果:

十.路由中的构子函数

路由中的构子函数写法有两种:

1.写在路由配置里的构子函数(写在路由配置里的构子函数只有一个,就是beforeEnter);

 {
      path:"/params/:newsId/:newsTitle",//传递参数的格式:冒号(进行绑定)跟上键
      component:Params,
      // 这里配置路由函数,一定要跟箭头函数
      beforeEnter:(to,from,next)=>{//这三个参数都是对象
        console.log(to);//to是进入的信息,这里还有params传递的信息
        console.log(from);//from是来的信息
        console.log(next);//没有发现信息
        next()//这里记得要next下去,不然不会接着下一步哦
      }
    },

上面的beforeEnter就是构造函数,注意写法是箭头函数,而且要next下去,没有next的话不会跳转.next也可以写成next(true),默认就是这个,如果next(false)跟不写next效果一样,next里面也可以先写跳转到根目录(写法next({path:"/"}))
三个参数:
a.to:路由将要跳转的路径信息,信息是办好在对象里面的;
b.from:路由跳转前的路径信息,也是对象的形式;
c.next:路径的控制参数,相当于开关,常用的有next(true)和next(false).

2.写在模板中的构子函数(写在模板里的构子函数有两个:beforeRouteEnter和beforeRouteLeave)

在params.vue里写这两个进入和离开的构子函数构子函数,操作如下:

总结:params.vue模板里的路由构子函数,它可以监控到路由的进入和路由的离开,也可以轻易的读取to和from的值.

十一.编程式导航

上面10节使用router-link to跳转的方式叫做声明式导航,而与之对应的就是编程式导航.
那什么是编程式导航呢?其实就是在页面逻辑代码中需要跳转页面的操作就是编程式导航.

1.编程式导航里的前进和后退

写法如下:

2.编程式导航里的跳转到指定页

比如我们在登录页时判断用户名和密码正确时,需要跳转到首页或者用户中心页面就用这种导航方式.
写法如下:

路由参数传递总结:
传送门:https://www.cnblogs.com/luxiaoxing/p/7564580.html
一般有两种参数传递:
1.a标签的跳转传递(含带参数和不带参数);
2.点击编程式导航传递;
下面分别演示
1.准备一个传参的页面:

说明:routerLink中的to跟着的分别是path(对应路由配置里的path),参数是query.
点击后各自的路径如下:

注意:Hello.vue编程式导航里的$router是用来传递参数的，而Hi.vue中的$route是用来接收参数的。

2.准备一个接收参数的页面

说明:
params对应的是路由配置path里的斜杠跟着的信息;

query对应的是routerLink to里面写饿query参数信息;

3.设置好路由

4.在传参页面点击后效果如下

补充:路由懒加载的方式:

到此,路由已完结.