01
解读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 //对应的组件模板
}
]
})
增加一个Hi的路由和页面
- index.js与components/Hi.vue
Hi.png
1.router/index.js
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: 'Hello',
component: HelloWorld
},{
//添加
path: '/Hi',
name: 'Hi',
component: Hi
}
]
})
2.component/Hi.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'Hi',//更改
data () {
return {
msg: 'Hi Page'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
02子路由
在Hi页面下写两个子路由
3.png
- Hi页面占位置. <router-view/>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view/>
</div>
</template>
- router/index.js导航
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: 'Hello',
component: HelloWorld
},{
path: '/hi',
name: 'Hi',
component: Hi,
children:[
{path: '/',component:Hi},
{path: 'hi1',component:Hi1},
{path: 'hi2',component:Hi2},
]
}
]
})
03 vue-router如何参数传递
开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。
一、用name传递参数
- 在路由文件src/router/index.js里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
- 模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：
<p>{{ $route.name}}</p>
二、通过<router-link> 标签中的to传参
也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
- name：就是我们在路由配置文件中起的name值。
- params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1},
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
{{$route.params.username}}
04 单页面多路由区域操作
这节课我们讲“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。
最终效果
4.png
拢共需要3步.
- src/App.vue
<div>
<router-link to="/">LvYang</router-link> |
<router-link to="/tanyue">TanYue</router-link> |
</div>
<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>
- router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LvYang from '@/components/LvYang'
import TanYue from '@/components/TanYue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
default: HelloWorld,
left:LvYang,
right:TanYue
}
},
{
path: '/TanYue',
components: {
default: HelloWorld,
left:TanYue,
right:LvYang
}
}
]
})
- component,新建LvYang.vue,TanYue.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'LvYang',
data () {
return {
msg: 'LvYang'
}
}
}
</script>
第5节：vue-router 利用url传递参数
我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。
成品效果
5.png
利用url传值,拢共需要3步.
- App.vue
<div>
<router-link to="/params/520/TanYue is my love!">Params</router-link>
</div>
<router-view/>
- router/index.js path括号里面是正则只接受数字.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Params from '@/components/params'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
}
]
})
- components/params.vue
<div>
<h1>{{ msg }}</h1>
<p>ID:{{ $route.params.newsId }}</p>
<p>Title:{{ $route.params.newsTitle }}</p>
</div>
第6节：vue-router 的重定向-redirect
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:'/'
}
]
})
重定向时传递参数
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
第7节：alias别名的使用
- 会在网址显示tanyue.不要配到根目录不起作用
{
path: '/hi1',
component: Hi1,
alias:'/tanyue'
}
- 错误示范
{
path: '/',
component: Hello,
alias:'/home'
}
第8节：路由的过渡动画
- 炫酷的效果,拢共需要两部,1,CSS动画效果.2.包裹需要的route-view,并选择模式.
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
<transition name="fade" mode="out-in">
<router-view ></router-view>
</transition>
第9节：mode的设置和404页面的处理
一个是mode,一个是Error的配置.没什么好说的了.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Params from '@/components/params'
import Hi1 from '@/components/Hi1'
import Error from '@/components/Error'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
component: HelloWorld
},
{
path:'/params/:newsID(\\d+)/:newsTitle',
component: Params
},
{
path:'/goback',
redirect:'/'
},
{
path: '/hi1',
component: Hi1,
alias: '/tanyue'
},
{
path:'*',
component:Error
}
]
})
第10节：路由中的钩子
路由配置文件中的钩子函数
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
},
写在模板中的钩子函数
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
}
</script>
第11节：编程式导航
<template>
<div class="hello">
<h1>{{$route.params.newsID}}</h1>
<h1>{{$route.params.newsTitle}}</h1>
<button @click="goHome">回到首页</button>
<button @click="goback">后退</button>
</div>
</template>
<script>
export default {
name: 'Hi',
data () {
return {
msg: 'Hi Page'
}
},
methods:{
goback(){
this.$router.go(-1);
},
goHome(){
this.$router.push('/');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
