This article mainly introduces relevant information about the detailed explanation of vue-router routing basics. I hope this article can help everyone understand and master this part of the content. Friends in need can refer to it. I hope it can help everyone.
vue-router Detailed explanation of routing basics
Today I summarized the basics of vue-route and the officially recommended routing by vue.
1. Getting started
HTML
<p id="myp"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link> // 渲染出口 <router-view></router-view> </p>
Create template (component):
(You can also use import to introduce external components)
var foo={template:"<p>我是foo 组件</p>"};
var bar={template:"<p>我是bar 组件</p>"};Component injection routing:
var routes = [
{path:'/foo',component:foo},
{path:'/bar',component:b ar},
];Create a routing instance:
##
// 这里还可以传入其他配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes;
}); var routerVue = new Vue({
router
}).$mount("#myp");2. Dynamic routing matching
Sometimes what we need is the same template structure, At that time, the data was different, which meant that we wanted to connect logged-in users with different IDs to the same page, but we wanted to display independent information for each user. At this time, we used dynamic routing matching.HTML
<p id="myp"> // 点击对应链接时传入对应参数foo 和 bar <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </p>
##
const User = {
template:'<p>我的ID是{{ $route.params.id }}</p>',
// 在路由切换时可以观察路由
watch:{
'$route'(to,form){
console.log(to); //要到达的
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 标记动态参数 id
]
});
var myVue = new Vue({
router
}).$mount("#myp")1. Nested routing is about that we can render the
For example :
HTML：
<p id="myp"> <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </p>
const User = {
template:'<p><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></p>',
}
// 子路由
const userChildOne = {
template:'<p>我是 userChildOne</p>'
}
const userChildTwo = {
template:'<p>我是 userChildTwo</p>'
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User,
children:[ // 用法和参数和routes 一样
{path:"/user/childone",component:userChildOne},
{path:"/user/childtwo",component:userChildTwo}
]
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")
四, Named route
1. Name the route to specify the route jump, and use the parameters name and v-bind
HTML:<p id="myp">
<!-- 要用v-bind 的绑定to -->
<router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link>
<router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>
<router-view></router-view>
</p>JS:
const User = {
template:'<p>我的ID是{{ $route.params.userId }}</p>',
watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
// name 一一对应上
{path:'/user/:userId',name:"userOne",component:User},
{path:'/user/:userId',name:"userTwo",component:User}
]
});
var myVue = new Vue({
router
}).$mount("#myp")
5. Naming the view
1. Name the rendering view router-view. To specify which view renders the component
HTML:
<p id="myp">
<!-- 要用v-bind 的绑定to -->
<router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link>
<router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>
<!-- 视图命名 如果不写name 则为默认为 default-->
<router-view></router-view>
<router-view name='b'></router-view>
</p>JS：
// 四个模板
const UserA = {
template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
}
const UserB = {
template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
}
const UserC = {
template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
}
const UserD = {
template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
}
const router = new VueRouter({
routes:[
// name 一一对应上
{
path:'/user/:userId',
name:"userOne",
components:{ // 注意这里为components 多个“ s ”
default:UserA,
b:UserB
}
},
{
path:'/user/:userId',
name:"userTwo",
components:{
default:UserD,
b:UserC
}
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")
6. Redirection and Alias
Redirection and alias, first let me explain what redirection and alias are
"Redirect" means , when the user visits /a, the URL will be replaced with /b, and then the matching route is /b, 『Alias』 The alias of /a is /b, which means that when the user visits /b , the URL will remain /b, but the route match will be /a, just as if the user accessed /a. The alias for /a is /b, meaning that when a user accesses /b, the URL remains /b, but the route match is /a, just as if the user accessed /a.Redirect mainly uses parameters: redirect and alias mainly uses parameters: alias
HTML:
<p id="myp"> <h2>效果查看地址栏最后面的变化</h2> <router-link to="/User/foo">Go to foo</router-link> <router-link to="/User/bar">Go to bar</router-link> <router-link to="/User/Car">Go to bar</router-link> <router-view></router-view> </p>
JS:
const User = {
template:'<p>我是同一个页面</p>',
}
const router = new VueRouter({
mode:"history",
routes:[
{ path:'/User/foo',component:User},
{ path:'/User/bar',redirect: '/User/foo',component:User},
// 重定向的目标也可以是一个命名的路由：
// 甚至是一个方法，动态返回重定向目标：
// 别名设置
{ path:'/User/foo',alias: '/User/Car'}
]
});
var myVue = new Vue({
router
}).$mount("#myp")Related recommendations:
vue-router implements tab tab page
Based on Vue, Vuex, Vue -router implements the animation switching function
Three Vue-Routers to implement jumps between components
The above is the detailed content of Sharing of basic routing examples of vue-router. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
