详细介绍Vue-Router路由

Vue-Router 路由

一.路由简介

1.后端路由

应用程序如果去处理不同的url地址发送过来的请求

post : localhost:3000/api/login

get: localhost:3000/api/getlist

2.前端路由

不同的url地址要渲染不同的页面效果

• get: localhost:8080/index.html ()
• get: localhost:8080/index
• get: localhost:8080/#/index (hash模式路由)

后端路由与前端路由最本质的区别:前端只处理get请求

二.Vue-Router安装使用

1.npm安装

npm install vue-router -save-D

2.引用注册路由

// 引入Vue
import Vue from 'vue';
//引入路由
import VueRouter from 'vue-router'
//注册路由
Vue.use(VueRouter);

3.引入组件

//引入组件
import Index from './pages/Index.vue';
import Find from './pages/Find.vue';
import Mine from './pages/Mine.vue'

4.定义路由规则(是一个数组对象)

//定义路由规则
var routes = [
    {
        // path:路由url地址,一般是#后面的部分
        // component:使用哪个路由页面组件去渲染，
        path: '/index',
        component: Index
    },
    {
        path: '/find',
        component: Find
    },
    {
        path: '/mine',
        component: Mine
    },
];

5.创建路由实例

//创建路由实例
let router = new VueRouter({
    routes
});

6.在Vue实例配置router选项

var vm = new Vue({
    el: "#app",
    // 配置一个 router 选项
    router,
});

//如果是模块化构建的在main.js中配置
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

7.router-view 路由容器

<router-view></router-view>

路由视图本身是VueRouter提供的一个全局的组件 router-view,当url地址与某个路由规则匹配时,就会将相应的路由页面组件渲染到这个router-view上.比如:

get #/index   index组件渲染路由视图
get #/list    list组件渲染路由视图

注意,设置组件时,最好能设置组件的name属性,给它一个名字,不然VueDevtools

8.router-link

与router-view一样,都是引入vue-router之后提供的全局组件

router-link的作用就是实现路由的跳转(url的跳转),其实它本质上就是一个a标签,我们推荐使用它而不是使用a标签来跳转

<router-link to="/index" tag="span" active-class='on'>首页</router-link>
<router-link to="/find" tag="span" active-class='on'>发现</router-link>
<router-link to="/mine" tag="span" active-class='on'>我的</router-link>

• to 属性是必须的。用来设置点击时跳转到哪里
• tag属性,指定最终渲染成那个html标签
• active-class用于指定高亮样式的类名

三.路由属性

1.命名视图

有时候想同时展示多个视图,不是嵌套展示,比如创建一个布局,有导航栏和主内容2个视图,这个时候就可以使用命名视图了.界面中可以拥有多个单独命名的视图,而不是只有一个单独的出口.注意:如果router-view没有设置名字,那么默认名字为default.

//	引入需要渲染的组件
//@ 相当于当前代码的绝对路径,到src层级  
import A from '@/components/home/A.vue';
import B from '@/components/home/B.vue';
import C from '@/components/home/C.vue';

// 定义路由规则
var routes = [
    //命名视图,给router-view命名,用三个命名视图来加载三个组件
    {
        path: '/abc',
        components: {
            //aaa,bbb,ccc是命名视图
            aaa: A,
            bbb: B,
            ccc: C
        }
    }]

//视图容器  命名的视图
<router-view name="aaa"></router-view>
<router-view name="bbb"></router-view>
<router-view name="ccc"></router-view>

一个视图使用一个组件渲染,对于多个同个路由,多个视图就需要多个组件.配置路由时,components 需要带上s

注意:使用路由之后,页面渲染不出来,主要有2种原因

• 1.页面中没有提供 router-view
• 2.当前的url地址没有与之匹配的路由规则处理

2.命名路由

命名路由,就是在设置路由规则的时候,提供一个name属性

给“路径-组件”的匹配关系取个名字.

这个属性值,后续可以用来实现跳转

// 定义路由规则
var routes = [{
    //命名路由
    name: 'find',
    path: '/find',
    component: Find
}]

如果 要跳转到命名路由,可以在

<router-link :to="{name:'find'}" tag="span" active-class="on">发现</router-link>

3.路由模式

路由模式分为hash模式和history模式.vue-router默认hash模式

hash模式与history模式的区别?

• 1.url地址表现不同,hash模式有#号,history模式没有

• 2.实现原理不同

  hash模式是通过改变hash值并监听hashchange事件

  history模式是基于最新的html5里面的history相关的api进行的一些操作

  window.history.pushState()

  window.history.replaceState()

  监听history模式使用的是window.history.onpopState()事件

• 3.兼容性不同

  1.hash模式都可以兼容

  2.history模式只能兼容到IE10以上

• history模式在部署上线之后会出现404找不到页面这种问题,需要后端配置相关的处理才行.而hash模式没有这个问题

• 5.history模式时,重定向会有些问题,需要页面的名字叫index.html才行

面试中,可能面试官会问到,你之前的项目是用的什么模式?为什么要用这种模式?

其实很好回答:就说之前用的默认hash模式,虽然说有个#不怎么好看,不怎么美观,但是没人管这种区别啊,默认的用就用了,如果说你觉得不好看,我可以改为history模式啊,没有了#号,只不过需要运维在上线部署的时候,给它一段配置就可以了.

//创建路由实例
let router = new VueRouter({
    //指定路由模式,默认为hash
    mode: 'history',
    routes
});

4.重定向

当你访问某一个路径时，自动跳转到另一个路径

var routes = [{
            //重定向 
            path: '/abc',
            // 直接定向到某个路由  也可以定向到路由的别名
            //redirect: '/find'

            //也可以是命名式的路由
            redirect: {
                name: 'find'
            },
            {
                // 一般写在最后,通配符,路由地址不存在,直接跳转到首页
                path:'*',redirect: 'index'
            }
    }

5.别名

给路由规则中的path设置一个别名

路由规则中配置alias配置项

 var routes = [{
        name: 'find',
        path: '/find',
        alias: '/ab',
        component: Find,
    },

通过别名可以直接定位到path里的路径,一般路径很长的时候,可以使用别名

6.二级路由(嵌套路由)

实际开发中,我们很多时候,会遇到二级路由,三级的比较少,二级足够了

//引入商品模快组件
import Detail from '@/pages/goods/detail.vue';
import Good from '@/pages/goods/good.vue';

 var routes = [{
        path: '/find',
        component: Find,
        alias: '/ab',
        children: [
            {
                path: 'good',
                component: Good
            },
            {
                path: 'detail',
                component: Detail
            }
        ]
    }]
 
 
 //在find组件中需要设置视图容器
 <router-view></router-view>

7.动态路由

路由规则中path选项的值形如 /good/:xxxx/:yyyy 这种就是动态路由

var routes = [{
    //动态路由:冒号后面的id是个变量,在/detail对应的组件中使用 this.$route.params获取动态id
    //路由传参:props开启路由传参,并且允许接收参数的那个组件使用props属性来接收
    path: '/detail/:id', component: Detail, props: true
}]

使用这两种方式都可以传参

• this.$route.params.id 获取参数
• props属性接收参数

一般的情况下,我们使用动态路由的情景很多,比如跳转到详情页,那么详情页是如果获取到传过去的数据的呢?

是通过this.$route的数据,this.$route 中记录当前url的各种匹配关系,这个对象中有很多属性

• path 路由路径
• query 当前路由的?号传递过来的参数,是个对象,类似express中req.query获取的数据
• params 当前路由的动态参数的传递,是个对象.类似express中req.params获取的数据
• fullPath 当前路由的一个完整路径,包含带有?号参数的
• meta 当前路由的元信息,是个对象,是一开始定义路由规则的时候再meta配置中设置的内容

8.声明式导航

一般用于直接跳转,可以用声明式的导航,比如类似侧边栏,或者底部tab导航 用router-link来控制路由跳转

<router-link to="/index" tag="span" active-class="on">首页</router-link>
<router-link to="/find" tag="span" active-class="on">发现</router-link>
<router-link to="/mine" tag="span" active-class="on">我的</router-link>

9.编程式导航

除了使用router-link创建a标签来定义导航链接外,我们还可以借助router的实例方法,通过编写代码来实现

也就是:通过js控制路由跳转

说起编程式导航,我们就不得不讲的一个vue-router的内置对选哪个:$router对象

当我们使用vue-router之后,在vue的原型上提供了一个$router对象,使用这个对象的一些方法来进行路由的跳转

1.this.$router.push()

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

• 1.就相当于普通的router-link

• 2.它的参数可以是:

  字符串,要跳转到的路由path

  ​ 对象,对象中要配置path属性

2.this.$router.replace()

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

• 就相当于带有 replace 属性 的 router-link

• 它的参数可以是:

  字符串，要跳转到路由的path

  对象，对象中配置 path 属性

3. $route 和$router的区别

• $route 是当前匹配的路由信息对象,可以通过他获取一些当前路由的一些信息,比如params动态参数.vue将$route挂到了每个组件的data数据里面.
• $router 就是new VueRouter() 生成的那个实例对象,vue将他挂载到了vue的原型上面,所有每个组件都通过访问,然后使用来完成编程式导航的一些操作

4.push()和replate和router-link上的to属性

​ 三者传递参数为对象时,对象有哪些属性?

• path
• name
• query
• params 注意:params与path会产生冲突,请使用name和params结合使用
• meta

10.路由懒加载

打包构建应用时,包会非常大,全是一些些的组件,影响页面的加载,官方给的解决方法是,把不同路由对应的组件分开成不同的代码块,然后当路由被访问的时候,才加载对应组件,会比较高效

结合Vue的异步组件和webpack的代码分割功能,可以轻松实现路由组件的懒加载.

1.把异步组件定义成一个返回promise的工厂函数

const Index=()=>Promise.reslove({
	//组件的定义对象
});

2.在webpack2中,使用动态import语法来定义代码分块点

import('./Index.vue')

结合这两点,结合起来是:

const Index=()=>import('./Index.vue')

在项目中这种写法,不建议写

// 同步加载组件的写法，不建议这么写
// import Home from './pages/Home.vue'
// import Find from './pages/Find.vue'
// import User from './pages/User.vue'
// import Detail from './pages/Detail.vue'

通常我们需要这样写,使用路由懒加载

// 建议使用路由懒加载的写法，以节省项目性能
const Home = ()=>import('./pages/Home.vue')
const Find = ()=>import('./pages/Find.vue')
const User = ()=>import('./pages/User.vue')
const Detail = ()=>import('./pages/Detail.vue')
const Cart = ()=>import('./pages/Cart.vue')