基本用法及模板
【首先，安装路由的包】：npm install vue-router --save
【main.js】页面
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' /* 1、引入路由 */
/* 4、引入需要路由跳转的相关组件页面 */
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/List.vue'
Vue.config.productionTip = false
Vue.use(VueRouter) /*2、声明路由的使用 */
const router=new VueRouter({ /*5、配置路由，包括路径设置，组件设置 */
routes:[
{path:"/",component:Users},
{path:"/mans",component:Mans}, /* /mans是定义路径名称，这里也可以定义为/pigs,/haha等*/
{path:"/list",component:List},
{path:"*",redirect:"/mans"} /*当路由路径输入错误匹配不上时，默认跳转到"/mans"路径下*/
],
mode:"history" /* 此行代码可以去除路径中的# */
})
new Vue({
el: '#app',
router, /* 3、在实例化对象里面注册router */
components: { App }, /* 注意这里是根组件所在处 */
template: '<App/>' /* 6、前往根组件处(这里根组件是App.vue)设置路由跳转 */
})
【App.vue】页面
<template>
<div id="app">
<!-- 7、router-link用于跳转路由，router-link在任何子组件中均可使用。 -->
<p><router-link to="/">跳转到Users页面</router-link></p>
<p><router-link to="/mans">跳转到Mans页面</router-link></p>
<p><router-link to="/list">跳转到List页面</router-link></p>
<!-- 6、router-view用于展示路由,类似于react路由的this.props.children -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
methods:{
}
}
</script>
<style></style>
知识点讲解
【tag="div"】
App.vue页面：
<p><router-link to="/list" tag="div" >跳转到List页面</router-link></p> <!--tag="div"的意思是将router-link在dom中设置为以div标签呈现，原本默认router-link是a标签的-->
【动态绑定路由地址，给路由命名，第一种方式】
<template>
<div>
<p><router-link :to="homeLink">跳转到Home主页面</router-link></p> /*下方在data中定义了homeLink:"/",这里便可以通过:to="homeLink"的方式动态绑定路由,以后直接改动homeLink便可改变路由*/
<p><router-link to="/mans">跳转到Mans页面</router-link></p>
</div>
</template>
<script>
export default{
el:"Home",
data(){
return{
homeLink:"/"
}
}
}
</script>
【给路由命名，第二种方式】
main.js页面：
const router=new VueRouter({
routes:[
{path:"/",component:Users},
{path:"/mans",name:"mansLink",component:Mans}, /*给此路由命名为mansLink*/
{path:"/list",component:List},
{path:"*",redirect:"/mans"}
],
mode:"history"
})
Header.vue页面：
<template>
<div id="header">
<!-- 7、router-link用于跳转路由，router-link在任何子组件中均可使用。 -->
<p><router-link to="/">跳转到Users页面</router-link></p>
<p><router-link :to="{name:'mansLink'}">跳转到Mans页面</router-link></p> /*命名后路由的书写方式*/
<p><router-link to="/list">跳转到List页面</router-link></p>
</div>
</template>
【设置默认匹配的路由】
const router=new VueRouter({
routes:[
{path:"/",component:Users},
{path:"/mans",component:Mans},
{path:"*",redirect:"/mans"} /*当路由路径输入错误匹配不上时，默认跳转到"/mans"路径下*/
],
mode:"history"
})
【返回上一页，跳转指定页面】
Home.vue页面：
<template>
<div class="home">
<button v-on:click="goBack" >返回上一页</button>
<button v-on:click="goPoint">跳转到指定路由：Menu<button>
</div>
</template>
<script>
export default{
methods:{
goBack:function(){
this.$router.go(-1) //跳转到上一次浏览的页面
},
goPoint:function(){
//this.$router.replace("/menu") //跳转到指定的路由下
//this.$router.replace({name:"menuLink"}) //跳转到指定的路由名字下
//this.$router.push("/menu") //通过push进行指定路由跳转（常用方式）
this.$router.push({name:"menuLink"})
}
}
}
</script>
一级路由，二级路由，三级路由
【main.js】页面
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
/*一级路由*/
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
const router=new VueRouter({
routes:[
{path:"/",name:"usersLink",component:Users},
{path:"/mans",name:"mansLink",component:Mans}, /*一级路由*/
{path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[ /*二级路由*/
{path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[ /*三级路由*/
{path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
{path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
]},
{path:"/list/listPlay",name:"playLink",component:ListPlay},
{path:"/list/listSee",name:"seeLink",component:ListSee},
]},
{path:"*",redirect:"/"}
],
mode:"history"
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
——————————————————————
【App.vue】页面
<template>
<div class="users">
<router-link to="{name:'usersLink'}">用户</router-link>
<router-link to="{name:'mansLink'}">男人装</router-link>
<router-link to="{name:'listLink'}">列表</router-link>
<div>
<router-view></router-view> /*一级路由的路由展示*/
</div>
</div>
</template>
【List.vue】页面
<template>
<div class="list">
<router-link to="{name:'foodLink'}">美食</router-link>
<router-link to="{name:'playLink'}">娱乐</router-link>
<router-link to="{name:'seeLink'}">观赏</router-link>
<div>
<router-view></router-view> /*二级路由的路由展示*/
</div>
</div>
</template>
【ListFoodCake.vue】页面
<template>
<div class="listFoodCake">
<router-link to="{name:'cakeLink'}">蛋糕</router-link>
<router-link to="{name:'cookieLink'}">饼干</router-link>
<div>
<router-view></router-view> /*三级路由的路由展示*/
</div>
</div>
</template>
全局守卫&路由独享守卫
【main.js】页面
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/List.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
const router=new VueRouter({
routes:[
{path:"/",component:Users},
{path:"/mans",component:Mans,beforeEnter:(to,from,next)=>{ /*beforeEnter,路由独享守卫，仅在此路由中生效，和全局守卫的区别是作用域不同*/
if(from.path=="login" || from.path=="/register"){
next();
}else{
alert("非登陆状态，不能访问此页面！"); /
next("/login");
}
}},
{path:"/list",component:List},
{path:"*",redirect:"/mans"}
],
mode:"history"
})
/*全局守卫，示例*/
router.beforeEach((to,from,next)=>{ /*to:要进入的路由，from:你从哪一个路由离开，next:对应的函数*/
if(to.path=="login" || to.path=="/register"){ /*判断用户是否在登录注册页面，如果是，执行next()进行下一步操作*/
next();
}else{
alert("您还没登录，请先登录！"); /*如果用户在未登录或注册的情况下想点击其他页面，会弹框提醒用户登录注册，然后next()函数引导用户跳转到/login页面*/
next("/login");
}
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
组件内守卫
【Header.vue】页面
<script>
export default{
data(){
return {
name:"二狗子"
}
},
beforeRouteEnter:(to,from,next)=>{ /*进入页面之前*/
/*alert("Hello"+this.name)*/ /*这行代码中的thia.name是undefined,因为beforeRouteEnter在data之前执行，所以获取不到data里的数据，因此要用下面的方法*/
next(vm=>{
alert("Hello"+vm.name);
})
},
beforeRouteLeave(to,from,next){ /*离开页面之前*/
if(confirm("确定离开吗？")==true){
next()
}else{
next(false) /*弹框点击确定则离开此页面，弹框点击取消则不做反应*/
}
}
}
</script>
路由模块单独抽离出来
在src文件夹下新建routers.js
【main.js】页面抽离路由前
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
/*1、路由引入，抽离出去*/
/*一级路由*/
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
/*2、路由配置，抽离出去*/
const routes=[
{path:"/",name:"usersLink",component:Users},
{path:"/mans",name:"mansLink",component:Mans}, /*一级路由*/
{path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[ /*二级路由*/
{path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[ /*三级路由*/
{path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
{path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
]},
{path:"/list/listPlay",name:"playLink",component:ListPlay},
{path:"/list/listSee",name:"seeLink",component:ListSee},
]},
{path:"*",redirect:"/"}
],
const router=new VueRouter({
routes,
mode:"history"
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
【main.js】页面抽离路由后
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import {routes} from './routers' /*3、路由模块引入*/
Vue.config.productionTip = false
Vue.use(VueRouter)
const router=new VueRouter({
routes,
mode:"history"
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
【routers.js】页面
/*1、路由引入，抽离进来*/
/*一级路由*/
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'
//2、路由配置，抽离进来，3、并暴露出去*/
export const routes=[
{path:"/",name:"usersLink",component:Users},
{path:"/mans",name:"mansLink",component:Mans}, /*一级路由*/
{path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[ /*二级路由*/
{path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[ /*三级路由*/
{path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
{path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
]},
{path:"/list/listPlay",name:"playLink",component:ListPlay},
{path:"/list/listSee",name:"seeLink",component:ListSee},
]},
{path:"*",redirect:"/"}
],
路由复用
【Users.vue】页面
<template>
<div class="users">
<router-link to="{name:'usersLink'}">用户</router-link>
<router-link to="{name:'mansLink'}">男人装</router-link>
<router-link to="{name:'listLink'}">列表</router-link>
<div>
<router-view></router-view> /*一级路由的路由展示*/
</div>
<div> /*1、二级路由的路由在这里复用,为每个router-view添加对应的name，实现复用*/
<p><router-view name="listfood"></router-view></p>
<p><router-view name="listplay"></router-view></p>
<p><router-view name="listsee"></router-view></p>
</div>
</div>
</template>
【routers.js】页面
/*一级路由*/
import Mans from './components/Mans.vue'
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'
export const routes=[
/*{path:"/",name:"usersLink",component:Users}, */ /*2、更改前*/
{path:"/",name:"usersLink",components:{ /2、更改后：component加s，添加多个组件并为这些组件命名以方便调用*/
default:Users, /*default，默认组件为Users*/
"listfood":listFood,
"listplay":listPlay,
"listsee":listSee,
}},
{path:"/mans",name:"mansLink",component:Mans}, /*一级路由*/
{path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[ /*二级路由*/
{path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[ /*三级路由*/
{path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
{path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
]},
{path:"/list/listPlay",name:"playLink",component:ListPlay},
{path:"/list/listSee",name:"seeLink",component:ListSee},
]},
{path:"*",redirect:"/"}
],
页面控制滚动行为
滚动行为即通过路由导入到当前页面后，浏览器所展示的这部分是整个大页面的哪个位置。
比如一个长页面的高度有5000px,而浏览器只能展示960px高度的这一部分页面。通过控制滚动行为我们可以设置，当路由跳转过来时，我们展示给用户的是长页面的1000px到1960px这一部分。
【main.js】
const router = new VueRouter({
routes,
mode:"history",
scrollBehavior(to,from,savePosition){
return {x:0,y:1000} /*从(0,1000)的位置开始展示页面*/
return {selector:".subtitle"} /*从class="subtitle"的元素开始展示页面*/
}
})
扫一扫
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
