1.1懒加载方式导入(当使用这个组件时才会加载,index.js中书写)
const home =() =>import("../components/home")
1.2路由的配置
import Vue from 'vue'
import Router from 'vue-router'
// 懒加载方式导入
const home =() =>import("../components/home")
const about =() =>import("../components/about")
const user =() =>import("../components/user")
const homenews =() =>import( "../components/homenews")
const homemessage =() =>import("../components/homemessage")
const profile = ()=>import("../components/profile")
Vue.use(Router)
const routes=[
{
path:'/',
redirect:'/home',
meta:{
title:'首页'
}
},
{
path:'/home',
component:home,
children:[
{
path:'messages',
component:homemessage
},
{
path:'news',
component:homenews
}
]
},
{
path:'/about',
component:about,
meta:{
title:'关于'
}
},
{
path:'/user/:username',
component:user,
meta:{
title:'用户'
}
},
{
path:'/profile',
component:profile,
meta:{
title:'档案'
},
beforeEnter:(to,from,next)=>{
console.log("独享守卫")
next()
}
}
]
const router=new Router({
routes,//以数组的方式导入
// 去除URL中的#
mode:'history',
linkActiveClass:'active'
})
router.beforeEach((to,from,next)=>{
document.title=to.matched[0].meta.title;
next();
})
export default router
总结:1.以 routes数组导入到router路由之中,
2.mode 去除URL中的#号
3.数组形式:const routers=[{
path:-
component:-
}],
4.path为/时表示默认打开地址
5.redirect 表示转发
6.meta表示带的参数
7.父子组件:使用 children定义
在父组件中:
children:[
{
path:'messages',
component:homemessage
},
{
path:'news',
component:homenews
}
注意children中的path无需用/开头
8独享守卫(钩子函数)
const router=new Router({
routes,//以数组的方式导入
// 去除URL中的#
mode:'history',
linkActiveClass:'active'
})
router.beforeEach((to,from,next)=>{
document.title=to.matched[0].meta.title;
next();
})
export default router
总结:to 表示去的组件,from表示来的组件
next表示执行去的流程
2.路由的传参
方式一:
在index.js的path路径中使用 :参数名
{
path:'/user/:username',
component:user,
meta:{
title:'用户'
}
},
在跳转界面
<router-link :to="/user/+name" replace>用户</router-link>
进行跳转,并带上了name参数
接收参数用:
<h1>{{username}}用户页面{{$route.params.username}}</h1>
</div>
</template>
<script>
export default {
name: "user",
data(){
return{
username:this.$route.params.username
}
}
}
</script>
方式二:
无需改变path路径
在要跳转的组件中
方式1:
<router-link :to="{path:'/profile',query:{name1:'zhangsan'}}">档案</router-link>
方式2:
<button @click="dangan">档案</button>
dangan(){
this.$router.push({
path:'/profile',
query:{name1:'zhangsan'}
})
}
接收时使用
<h1>{{this.$route.query}}</h1>
路由方式
// this.$router.push("/home")
// 返回失效
this.$router.replace("/home")