vue:Router路由

认识路由

简单认识

1.网络工程中的术语

2.路由(维基百科):就是通过互联网把信息从源地址传输到目的地址的活动.

后端路由

后端处理url和页面之间的映射关系.把数据返回到前端.然后进行渲染.

本人后端开发工程师不在解释.

前端路由

前后端分离技术ajax阶段:后端只提供数据支持,不进行数据的渲染.前端发起ajax异步请求,然后请求后台的数据,然后再通过js进行dom的渲染.

单页面富应用阶段

其实SPA(simple page web application )最主要的特点就是前后端分离得基础上加上了一层前端路由.也就是前端来维护一套路由规则.

前端路由的核心是:

1.改变URL但是页面是不进行整体刷新的

2.怎么实现呢?

URL的hash和h5的history

1.url的hash(默认的方式)

location.hash = "xxx"

2.history模式

history.pushState({},'','home');
history.pushState({},'','me');
history.pushState({},'','index');
//下面这两种方法是一样的.
history.back();
history.go(-1);
//向前走一步
history.forward();
history.go(1)

栈结构:取栈顶元素,back()方法取新的栈顶元素.

4.修改router模式为history

const rooter = new VueRooter({routers,mode: 'history'
})

vue-router基本使用

安装配置

npm安装

步骤一:安装vue-route

npm install vue-route --save

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

第一步:导入路由对象并调用Vue.use(VueRoute)

第二步:创建路由实例,并且传入路由映射

第三步:再Vue实例中挂载路由实例

使用vue-router的步骤

第一步:创建路由组件

第二步:配置路由映射,组件和路径映射关系

第三步:使用路由,通过(最后被渲染成a标签)和

简单的使用

1.案例

router文件夹下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '../components/home'
import about from '../components/about'
Vue.use(Router)const routers =[{path: '/home',name: 'home',component: home},{path: '/about',name: 'about',component: about}
]export default new Router({router: routers
})

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

about.vue和home.vue组件lue

App.vue

<template><div id="app"><img src="./assets/logo.png"><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

2.配置默认首页

redirect的 使用

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '../components/home'
import about from '../components/about'Vue.use(Router)export default new Router({routes: [{path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home},{path: '/about',name: 'about',component: about}]
})

Router-link的属性

1.tag

​ 把router-link标签渲染成指定的标签

示例:

<template><div id="app"><router-link tag="button" to="/home">首页</router-link><router-link tag="button" to="/about">关于</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

2.to

router路由映射关系

3.active-class

​ 当对应的路由匹配成功时,会自动的给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称.

​ 在进行高亮显示的导航栏菜单或者底部的tabbar,会使用到该类.

​ 但是通常不会修改类的属性,会直接使用默认的router-link-active即可.

示例:点击触发该属性

<template><div id="app"><router-link tag="button" to="/home">首页</router-link><router-link tag="button" to="/about">关于</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>.router-link-active{color: red;}
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4.replace

replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上个页面.

通过代码跳转路由

示例

<template><div id="app"><!-- <router-link tag="button" to="/home" @click="homeClick">首页</router-link><router-link tag="button" to="/about" @click="aboutClick">关于</router-link>
--><button @click="homeClick">首页</button><button @click="aboutClick">关于</button><router-view/></div>
</template><script>
export default {name: 'App',methods:{homeClick(){this.$router.push("/home")console.log("我是首页")},aboutClick(){this.$router.push("/about")console.log("我是关于")}}
}
</script><style>.router-link-active{color: red;}
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

动态路由

在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面,希望是如下路径:

1./user/aaaa或者/user/bbbb

2.除了有前面的/user之外,后面还跟上了用户的ID

3.这种path和Component的匹配关系,我们称之为动态路由(也是路由传参数的一种形式)

示例:

router文件夹下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '../components/home'
import about from '../components/about'
import user from '../components/user'Vue.use(Router)export default new Router({routes: [{path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home},{path: '/user/:userId',name: 'user',component: user},{path: '/about',name: 'about',component: about}]
})

注意:上面参数传递的定义格式

user.vue文件

<template><div><h2>{{ message }}</h2><p>{{ page }}</p><h1>{{ userId }}</h1></div>
</template><script>export default {name: "user",data(){return{message: '我是用户',page: '我是用户的内容,嘿嘿嘿嘿嘿嘿~'}},computed: {userId(){return this.$route.params.userId}}}
</script><style scoped></style>

App.vue文件

<template><div id="app"><router-link tag="button" to="/home">首页</router-link><router-link tag="button" to="/about">关于</router-link><router-link tag="button" :to="'/user/'+ userId">用户</router-link><router-view/></div>
</template><script>
export default {name: 'App',data(){return{userId: 'lisi',imgUrl: 'http://www.baidu.com/logo.png'}}
}
</script><style>.router-link-active{color: red;}
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

效果

总结:template标签内的内容得放在div中

路由的懒加载

官方解释

1.打包构建应用时,JavaScript包会变得非常大,影响页面加载

2.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候,才加载对应的组件,这样就更加高效.

3.个人理解:用到时再加载.

对官方理解

1.我们在路由中会定义很多页面

2.一般情况下打包后是放在一个js中

3.多个页面放在一个js文件中必然会造成这个页面很大

4.造成的我们一次从服务器请求下来这个页面,会花费很长时间,造成页面短暂空白,影响用户体验

5.所以使用路由懒加载能解决这个问题

路由懒加载做什么:

1.主要的作用是将路由对应的组件打包成一个个js代码块

2.只是在访问时,才加载对应的组件.

路由懒加载的效果

1.左边app.801c…:作用打包后的业务逻辑代码,即自己写得代码打包后的文件

2.mainfest:底层支撑文件

3.vendor:第三方资源打包后的文件

实现方式

1.结合vue的异步组件和webpack的代码分析

const home = resolve => {require.ensure(['../components/home.vue'],()=>{resolve(require('../componennts/home.vue'))})};

2.AMD写法

const About = resolve=> require(['../componennts/about.vue'],resolve);

3.ES6中,我们可以有更加简单的写法来组织vue异步组件和webpack的代码分割

const home = ()=>import('../componenets/home.vue')

示例

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
/*import home from '../components/home'
import about from '../components/about'
import user from '../components/user'*/const home = () => import('../components/home');
const about = () => import('../components/about');
const user = () => import('../components/user')
Vue.use(Router)export default new Router({routes: [{path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home},{path: '/user/:userId',name: 'user',component: user},{path: '/about',name: 'about',component: about}]
})

vue-router嵌套路由

简介:

嵌套路由是一个很常见的功能

1.比如在home页面中,我们希望通过/home/newsh和/home/message访问一些内容

2.一个路径映射一个组件,访问这两个路径也会分别渲染两个组件

示例

home.vue下的子组件

<template><div><ul><li>新闻1</li><li>新闻2</li><li>新闻3</li></ul></div>
</template><script>export default {name: "homeNews"}
</script><style scoped></style>

配置路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
/*import home from '../components/home'
import about from '../components/about'
import user from '../components/user'*/const home = () => import('../components/home');
const about = () => import('../components/about');
const user = () => import('../components/user');
const news = () => import('../components/homeNews')
Vue.use(Router)export default new Router({routes: [{path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home,children: [{path: 'news',component: news}]},{path: '/user/:userId',name: 'user',component: user},{path: '/about',name: 'about',component: about}]
})

使用在home中,router-view和router-link

<template><div><h2>{{message}}</h2><p>{{page}}</p><router-link to="/home/news">新闻</router-link><router-view></router-view></div>
</template><script>export default {name: "home",data(){return{message: '我是首页',page: '我是首页的内容,哈哈哈哈哈哈~'}}}
</script><style scoped></style>

vue-route参数传递

传递参数一:

传递参数的主要两种方式是:params和query

params的类型(少量传递):

1.配置路由的格式(动态路由):/user/:userId

2.传递方式:在path后面跟上对应的值

3.传递后形式的路径:/router/123,/router/abc

query类型:(大量传递)

1.配置路由格式:/router,也就是普通配置

2.传递方式:对象中使用query的key作为传递方式

3.传递后路径的形式:/router?id=123;/router?id=abc

示例:

新建组件:profile.vue

<template><div><h2>我是Profile组件</h2><p>{{$route.query.name}}</p><p>{{$route.query.age}}</p><p>{{$route.query.sex}}</p></div>
</template><script>export default {name: "Profile",}
</script><style scoped></style>

配置路由:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
/*import home from '../components/home'
import about from '../components/about'
import user from '../components/user'*/const home = () => import('../components/home');
const about = () => import('../components/about');
const user = () => import('../components/user');
const news = () => import('../components/homeNews');
const profile = () => import('../components/Profile')
Vue.use(Router)export default new Router({routes: [{path: '/profile',component: profile}, {path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home,children: [{path: 'news',component: news}]},{path: '/user/:userId',name: 'user',component: user},{path: '/about',name: 'about',component: about}]
})

使用组件:

<template><div id="app"><router-link tag="button" to="/home">首页</router-link><router-link tag="button" to="/about">关于</router-link><router-link tag="button" :to="'/user/'+ userId">用户</router-link><router-link :to="{path:'/profile', query:{name: '张三', age: 18, sex: '男'}}" tag="button">档案</router-link><router-view/></div>
</template><script>
export default {name: 'App',data(){return{userId: 'lisi',imgUrl: 'http://www.baidu.com/logo.png'}}
}
</script><style>.router-link-active{color: red;}
}
</style>

传递参数二

<template><div id="app"><router-link tag="button" to="/home">首页</router-link><router-link tag="button" to="/about">关于</router-link><router-link tag="button" :to="'/user/'+ userId">用户</router-link>
<!--    <router-link :to="{path:'/profile', query:{name: '张三', age: 18, sex: '男'}}" tag="button">档案</router-link>--><button @click="proClick">档案</button><router-view/></div>
</template><script>
export default {name: 'App',data(){return{userId: 'lisi',imgUrl: 'http://www.baidu.com/logo.png'}},methods:{proClick(){this.$router.push({path: '/profile',query:{name: '张三',age: 18,sex: '男'}})}}
}
</script><style>.router-link-active{color: red;}
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

vue-route导航守卫

作用:导航守卫的主要作用是监听跳转

需求:打开哪一个界面上面的标题必须和当前界面的标题一样

思路:1.生命周期函数create(),但是每一个界面都要写这个函数,所以不建议用

2.vue-router全局守卫

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
/*import home from '../components/home'
import about from '../components/about'
import user from '../components/user'*/const home = () => import('../components/home');
const about = () => import('../components/about');
const user = () => import('../components/user');
const news = () => import('../components/homeNews');
const profile = () => import('../components/Profile')
Vue.use(Router)const router = new Router({mode: 'history',routes: [{path: '/profile',component: profile,meta:{title: '档案'}}, {path: '/',name: "index",redirect: "/home"},{path: '/home',name: 'home',component: home,meta:{title: '首页'},children: [{path: 'news',component: news}]},{path: '/user/:userId',name: 'user',component: user,meta:{title: '用户'}},{path: '/about',name: 'about',component: about,meta:{title: '关于我们'}}]
});router.beforeEach((to,from,next) => {document.title = to.meta.title;next();
})export default router;

效果:

总结:

[][]详细学习

keep-alive

1.keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重复渲染.

2.router-view也是一组件,如果直接被包在keep-alive里面,所有组件匹配到的视图都会被保存下来.

属性:

1.exclude:字符串或者正则表达式,任何匹配到的都不会被缓存

2.include:字符串或者正则表达式,直有匹配到的会被缓存.