vue-route
由于这不是vue必须的,但是在使用前需要先安装vue
并且在使用前必须引入vue.js因为vue-router是依赖vue.js的
安装
npm install vue vue-router --save
路由
- 什么是路由?
访问不同的路径,就可以返回不同的结果
- 使用路由 vue-router
由于vue-router是基于vue的所以在使用前必须行引入vue
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入vue-router.js之前必须引入vue.js -->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
基本路由
// 实例化vue-router
let vueRouter = new VueRouter({
routes: [
{path: "/home", component: home},
{path: "/list", component: list},
],
});
// 关联到vue实例中使用router属性
const vm = new Vue({
el: '#app',
router: vueRouter,
});
在模板中使用
<router-view></router-view>这个全局组件即可
这个组件能够根据VueRouter实例中的的routes自动显示或隐藏相应的组件
<div id="app">
<router-view></router-view>
</div>
路由模式 mode
- hash(default)
- history.pushStatus('','','path');
如果想在页面中使用
a标签来访问不同的路由可以设置
则可以设置路由模式mode的值为history,使用<router-link>
这个全局组件
const vueRouter = new VueRouter({
routes: [
{path: "/home", component: home},
{path: "/list", component: list},
],
mode: 'history',
});
- 在模板中使用
<router-link></router-link>组件
<div id="app">
<router-link to="/home">去首页</router-link>
<router-link to="/list">去列表页</router-link>
</div>
注:使用
<router-link></router-link>组件是必须加上to
属性,to的值是 vueRouter 实例中routes配置的路由项
点击哪个就会显示路由对应的组件
- 默认路由
const vueRouter = new VueRouter({
routes: [
{path: "", component: home}, // a默认路由
{path: "/home", component: home},
{path: "/list", component: list},
{path: "/*", redirect: '/home'} // b默认路由
// redirect 是重定向
],
mode: 'history',
});
a默认路由: 没有任何路由时候,显示这个路由对应的组件b默认路由: 没有匹配到任何路由时,显示这个路由对应的组件- 注: 因为路由匹配顺序的原因,这a必须
第一个b必须在最后一个
在需要匹配404时 建议使用这种方式
- 设置路由连接的样式
- 设置路由标签(默认
a标签) - 设置当前路由样式
- 设置路由标签(默认
<!-- 设置路由标签(默认`a标签`) -->
<div id="app">
<router-link to="/home" tag="button">去首页</router-link>
<router-link to="/list" tag="a">列表页</router-link>
<router-view></router-view>
</div>
<!--设置活动路由样式-->
<style>
.active {
color: #ff0000;
}
</style>
<script >
const vueRouter = new VueRouter({
routes: [
{path: "", component: home},
{path: "/home", component: home},
{path: "/list", component: list},
],
mode: 'history',
// 默认的活动路由类名叫: router-link-active
linkActiveClass: 'active',
});
</script>
编程式路由
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue For Vue-Router</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<style>
.home, .list{
height: 300px;
color: #ffffff;
}
.home{ background: #000; }
.list{ background: #cccccc; }
</style>
</head>
<body>
<div id="app">
<router-link :to="{path:'/home'}"></router-link>
<router-link :to="{path:'/list'}"></router-link>
<router-view></router-view>
</div>
<!--template-->
<script>
// make a vue template
let home = Vue.extend({
template: "<div class='home'>home首页 <button @click='toList'>去列表页</button></div>",
methods:{
toList(){
this.$router.push('/list');
},
}
});
let list = Vue.extend({
template: '<div class="list">list列表页 <button @click="toIndex">去首页</button></div>',
methods:{
toIndex() {
this.$router.go(-1);
},
},
});
// vue-route===================
const vueRouter = new VueRouter({
routes: [
{path: "", component: home},
{path: "/home", component: home},
{path: "/list", component: list},
],
});
// vue========================
const vm = new Vue({
el: '#app',
router: vueRouter,
/**
* 只要vue类实例挂载了router属性就会生成
* $router属性(放方法) 和 $route属性(放属性)
* 可以通过 this.$router/$route 来获得
*/
});
</script>
</body>
</html>
路由嵌套
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue vue-router study</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<!--css-->
<style>
.template {
line-height: 100px;
color: #ffff00;
text-align: center;
}
.template h1 {
font-size: 30px;
}
.list {
background: #cccccc;
}
.home {
background: #000;
}
.detail {
background: #00f;
}
</style>
</head>
<body>
<!--
1.首页 <-> 列表页 一级路由
2. 列表页 -> 详情页 二级路由
想实现一级路由,在实现二级路由
-->
<div id="app">
<router-view></router-view>
</div>
<!-- templates -->
<template id="list">
<div class="template list">
<h1>
这是list列表页
<button @click="toIndex">去首页</button>
<router-link to="/list/detail" tag="button">详情页</router-link>
</h1>
<!-- 二级路由 -->
<router-view></router-view>
</div>
</template>
<!-- javascript -->
<script>
// components
let home = Vue.extend({
template: `<div class="template home"><h1>这是Index首页 <button @click="toList">去列表页</button></h1></div>`,
methods: {
toList() {
this.$router.push('/list')
},
}
});
let list = Vue.extend({
template: '#list',
methods: {
toIndex() {
this.$router.push('/home')
},
}
});
let detail = Vue.extend({
template: `<div class="template detail"><h1>这是详情页</h1></div>`,
});
let vueRouter = new VueRouter({
routes: [
{path: '', component: home},
{path: '/home', component: home},
{
path: '/list', component: list,
children: [{path: 'detail', component: detail,}],
},
{path: '*', redirect:'/home'},
],
});
const vm = new Vue({
el: '#app',
router: vueRouter,
});
</script>
<!--
多级路由嵌套,先设置好一级路由,然后在一级路由的模板中设置子路由
<template id="list">
<div class="template list">
<h1>
这是list列表页<button @click="toIndex">去首页</button>
<router-link to="/list/detail" tag="button">详情页</router-link>
</h1>
<router-view></router-view>
</div>
</template>
-->
</body>
</html>
路由(路径)参数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue vue-router study</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!-- app -->
<div id="app">
<!-- 这里的show,test,three是路由的第二个参数 -->
<router-link to="/article/1/show">第一篇文章</router-link>
<router-link to="/article/2/test">第二篇文章</router-link>
<!--<router-link to="/article/3/three">第三篇文章</router-link>-->
<!--
除了以上这种写法,还可以用对象作为 to 的值,
如果用对象作为 to 的值,那么必须动态的绑定to属性(:to 或者 v-bind:to)
并且使用参数,但是这种方式必须给路由起个名字,
此时这个路由就不能再通过path跳转,必须通过路由名字
-->
<router-link :to="{name:'articles',params:{articleId:3, other:'three'}}">第三篇文章</router-link>
<router-view></router-view>
</div>
<!-- javascript -->
<script>
let article = Vue.extend({
// 这里的 articleId 是配置 vueRouter这个实例的 routes属性时配置的参数 :articleId
template: `<div>这是第 {{$route.params.articleId}} 片文章</div>`,
// 如果要根据路径参数的变化来进行相应的操作,可以监控参数的变化来进行对应的操作
watch: {
$route(){
alert("路径参数改变了.");
}
}
});
let vueRouter = new VueRouter({
routes: [
// 路径参数,表示值必须要有,但是值是动态的
{path: '/article/:articleId/:other', component: article, name: 'articles'}
// 设置的路由: /article/:articleId/:other
// 访问的路由: /article/1/test
// 最终会生成一个对象保存到 $route 属性中: {articleId:'1', other: 'test'}
// 所以在取值是可以使用: this.$route.articleId 来取出路由传递的参数
],
});
const vm = new Vue({
el: '#app',
router: vueRouter,
});
</script>
</body>
</html>
路由切换动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue vue-router 路由切换动画</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<style>
.test {
line-height: 50px;
background: #000;
color: skyblue;
padding: 5px 15px;
}
.fadeIn {
animation: fadeIn 1s ease-out forwards;
}
@-webkit-keyframes fadeIn{
0%{ opacity: 0; }
50%{ opacity: 0.5; }
100%{ opacity: 1; }
}
.fadeOut {
animation: fadeOut 1s ease-out forwards;
}
@-webkit-keyframes fadeOut{
0%{ opacity: 1; }
50%{ opacity: 0.5; }
100%{ opacity: 0; }
}
</style>
</head>
<body>
<!-- app -->
<div id="app">
<router-link to="/home">去首页页</router-link>
<router-link to="/list">去列表页</router-link>
<!--
mode: 动画执行的模式, 默认两个动画时并行的
in-out: 先进后出
out-in: 先出后进
-->
<transition enter-active-class="fadeIn" leave-active-class="fadeOut" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<!--
频繁的切换组件是不停的销毁组件,创建组件,所以为了性能,需要使用
<keep-alive></keep-alive> 这个全局组件类缓存组件
要缓存哪个组件就使用使用keep-alive 把那个组件包起来
-->
</div>
<!-- javascript -->
<script>
let home = Vue.extend({
template: `<div><p class="test">home首页</p></div>`,
});
let list = Vue.extend({
template: `<div><p class="test">list列表页</p></div>`,
});
let vueRouter = new VueRouter({
routes: [
{path: '', component: home},
{path: '/home', component: home},
{path: '/list', component: list},
],
});
const vm = new Vue({
el: '#app',
router: vueRouter,
});
</script>
</body>
</html>