Home >Web Front-end >JS Tutorial >Sharing of basic routing examples of vue-router
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; });Note that there is no 'r' in routes here (do not write it as routers)Create a vue instance (and Mounting instance)
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>JS
##
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 975b587bf85a482ea10b0a28848e78a4 in 975b587bf85a482ea10b0a28848e78a4. At this time, we need to use children when configuring the route.
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!