Routing basics
Install Vue-router
1. When using Vue-cli to install, choose to integrate Vue-router2. Use npm to install
npm install vue-router -s
integrated
Create a vue-router object
import Home from "./Home.vue"
;//将路径和组件一一对应，每一个配置项就是一条路由
const routes = [
{
path:"/",
name:"Home"
component:Home
},
{
},
{
}
]
// 新建vue对象，创建参数为对象类型,返回值：rrouter对象，路由管理对象
const router = new VueRouter({
mode:"history"//hash 前端路由和后端路由
//路由配置列表
routes
})
main.js
// 在挂载跟组件中，使用路由管理整个项目的组件
// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
router,//使整个项目的组件都在vue-router的管理之下
render: h => h(App)
}).$mount('#app')
Advanced routing
$router: routing management object
$route: the object of each route
push jump
name+params
this.$router.history.push({
name:"路有名称",
params:{
"属性名称":{
}
}
})
path+query
this.$router.history.push({
path:"/路径",
query:{
"属性名称":"值"
}
})
this.$router.history.push({
name:"路有名称",
query:{
"属性名称":"值"
}
})
router-link
<router-link :to={
name:"路有名称",params:{
"属性名称"："属性值"}}></router-link>
Dynamic path parameters
First, in the routing configuration file, modify the path and add wildcards const routes = [
{
// 动态路径参数 以冒号开头
path:"/details/:参数名称"
}
]
<router-link :to="`/details/${参数的值}`"></router-lin>
Obtain routing data
name+params
this.$route.query.属性名称
to={}
this.$route.query.属性名称
to+ dynamic path parameters
this.$route.query.属性名称
Routing metadata
You can add some additional attributes to each routing object when defining component routing
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta:{
isShowTabbar:true
}
},
{
path:"/category",
name:"Category",
component: Category,
meta:{
isShowTabbar:true
}
},
{
path:"/cart",
name:"Cart",
component: Cart,
meta:{
isShowTabbar:true
}
},
{
path:"/mine",
name:"Mine",
component: Mine,
meta:{
isShowTabbar:true
}
},
{
path:"/details",
name:"Details",
component:()=>import("../views/Details.vue"),
meta:{
isShowTabbar:false
}
}
]
Can be obtained through the this.$route object of the component
this.$route.meta.属性名称
Nested routing
Application scenarios:
Used in business scenarios that do not change frequently, to switch the changed part of the current page
Configure routing
Which page has a nested road, add the childred attribute to the road object of that page
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
Named view
If most pages of the entire project have a common component, the usual practice is to introduce this common component into the component that needs to be displayed, and then use it. Frequent introduction is not the best way to deal with it, you can use named views to handle
Add a named router-view to the component
<router-view name="header"></router-view>
Configure in routing
{
path:"/content",
name:"Content",
component:()=>import("../views/Content.vue"),
children:[
{
path:"/content",
components:{
header:Header,
// slider:Slider,
// content:Content,
// default:Slider
}
}
]
}