vue-router 路由基础的详解
今天我总结了一下vue-route基础,vue官方推荐的路由。
一、起步
HTML
<div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link> // 渲染出口 <router-view></router-view> </div>
创建模板(组件):
(也可以用import 引入外部组件)
var foo={template:"<p>我是foo 组件</p>"}; var bar={template:"<p>我是bar 组件</p>"};
组件注入路由:
var routes = [ {path:'/foo',component:foo}, {path:'/bar',component:b ar}, ];
创建路由实例:
// 这里还可以传入其他配置 const router = new VueRouter({ routes // (缩写)相当于 routes: routes; });
注意这里 routes 没有 ‘ r ' (不要写成 routers)
创建vue实例(并挂载实例)
var routerVue = new Vue({ router }).$mount("#myDiv");
二、动态路由匹配
有时候我们需要的是模板结构一样,当时数据不一样,就相当于我们要把不同ID的登录用户连接到同一个页面,但要显示每个用户的独立信息,这时我们就用到了动态路由匹配。
动态路由主要用到了全局 $route.params 和路由的动态参数,全局route 的 params API 存储着 路由的所有参数,路径的参数用 “ : ”来标记:
HTML
<div id="myDiv"> // 点击对应链接时传入对应参数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> </div>
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("#myDiv")
三、嵌套路由
1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children
例如:
HTML:
<div id="myDiv"> <router-link to="/User/:foo">Go to foo</router-link> <router-link to="/User/:bar">Go to bar</router-link> <router-view></router-view> </div>
JS:
const User = { template:'<div><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></div>', } // 子路由 const userChildOne = { template:'<div>我是 userChildOne</div>' } const userChildTwo = { template:'<div>我是 userChildTwo</div>' } 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("#myDiv")
四、命名路由
1.给路由命名指定路路由跳转,要用到参数name 和 v-bind
HTML:
<div id="myDiv"> <!-- 要用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> </div>
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("#myDiv")
五、命名视图
1.给渲染视图 router-view 命名,来制定让那个视图渲染组件
HTML:
<div id="myDiv"> <!-- 要用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> </div>
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("#myDiv")
六、重定向 和 别名
重定向 和别名,首先我先来解释一下什么叫做重定向和别名
『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
『别名』 /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
重定向主要用参数:redirect 而别名主要用到参数: alias
HTML:
<div id="myDiv"> <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> </div>
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("#myDiv")
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。