首先看一下router/index.js 路由文件！！！！
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称，
component: HelloWorld //对应的组件模板
}
]
})
vue-router其实就是我们链接路径管理系统，是Vue官方补充的vue-router插件
1、首选安装vue-router
npm install vue-router --save-dev
2、router-link 制作导航
<div>
<router-link to="/">首页</router-link>|
<router-link to="/hi">Hi页面</router-link>
</div>
//配置子路由
<div>
<router-link to="/">首页</router-link>|
<router-link to="/hi">Hi页面</router-link>|
<router-link to="/hi/hi1">Hi1页面</router-link>|
<router-link to="/hi/hi2">Hi2页面</router-link>
</div>
修改router/index.js
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称，
component: HelloWorld //对应的组件模板
},
{
path: '/hi',
name: 'Hi',
component: Hi,
children: [
{ path: '/', name: 'hi', component: Hi },
{ path: 'hi1', name: 'hi1', component: Hi1 },
{ path: 'hi2', name: 'hi2', component: Hi2 }
]
}
]
})
路由传参配置name属性
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称，
component: HelloWorld //对应的组件模板
}]
to传参
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
{{$route.params.username}}//模板中进行接受
单个页面多个路由操作
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components: {
default:HelloWorld,
left:Hi1,
right:Hi2
}
},
{
path: '/Hi',
name: 'HelloWorld',
components: {
default:HelloWorld,
left:Hi2,
right:Hi1
}
}
]
})
冒号的形式传递参数
{
path: '/params/:newsId/:newsTitle',
name: 'Params',
component:Params
}
//页面中我们这样写
<template>
<div>
<h2>{{msg}}</h2>
<p>新闻ID:{{$route.params.newsId}}</p>
<p>新闻标题：{{$route.params.newsTitle}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: "params pages"
};
}
};
</script>
redirect 重定向
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
alias别名的使用
{
path: '/hi1',
name: 'hi1',
component: Hi1,
alias:'/aliasHi1'
}
<router-link to="/aliasHi1">aliasHi1</router-link>
redirect与alias的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
路由的过渡动画<transition></transition>
<transition name="fade">
<router-view/>
</transition>
css过渡动画类名
fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
过渡模式mode
in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
mode有两个值histroy和hash
histroy :当你使用 history 模式时，URL 就像正常的 url，例如 http://localhost:8080/params/100/bbb，也好看！
hash :默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
路由文件中的钩子函数
beforEnter写在路由里面to:路由将要跳转的路径信息，信息是包含在对像里边的。from:路径跳转前的路径信息，也是一个对象的形式。next:路由的控制参数，常用的有next(true)和next(false)。
{
path: '/params/:newsId(\\d+)/:newsTitle',
name: 'Params',
component: Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
},
beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。
模板中应该这么写如下图
export default {
data() {
return {
msg: "params pages"
};
},
beforeRouteEnter(to, from, next) {
console.log("准备进入路由模板");
next();
},
beforeRouteLeave(to, from, next) {
console.log("准备离开路由模板");
next();
}
};
后退和进入首页和404页面
import Error from '@/components/Error'
{
path: '*',
component: Error
},
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Error:404"
};
}
};
</script>
<script>
export default {
name: "App",
methods: {
goBack() {
this.$router.go(-1);
},
goHome() {
this.$router.push("/");
}
}
};
</script>
