vue中的路由讲三点
第一点:
- 指令级别的路由<router-link>和程序级别的路由router.push();
第二点:
- 通过query和params传递参数和path和name之间的关系。
第三点:
- $router和$route地区别
声明:由于路由和传参和参数获取密切结合,所以将他们混合在一起讲解,最后会附加一个实例。
html中通过<router-link>指令完成路由跳转
第一种情况就是以path形式
<router-link v-bind:to="/foo">登幽州台歌</router-link>
第二种情况就是以路由对象Object的形式
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link>
注意这里的name指的是具名路由,在路由列表中的配置如下
{ name: 'wuhan', path: '/wuhan', component: WuHan }
而WuHan则是这个路由要抵达的模板或者说页面,定义如下
const WuHan = {template: '<div>武昌, 汉口, 汉阳 --- {undefined{$route.query.city}}</div>'}
注意由于在<router-link>中是通过query的形式区传递参数,所有在目的地页面中也只能采用query的形式获取参数。
也可以不采用query的方法,而采用params的形式传递参数
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
那么在在路由列表中的path中必须带上params传递过来的参数,否则在目的页面中无法获取参数
{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }
在目的页面中以params的形式获取参数对应的值
const WuHan = {template: '<div>武昌, 汉口, 汉阳 --- {undefined{$route.params.city}}</div>'}
注意事项:不可以在<router-link>的路由对象中同时出现path和params,此时params作废。目的页面中获取不到参数。
推荐是name和params搭配,path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数,
因为采用params的方式传递参数,当你进入到目的页面后确实能够正确地获取参数,但是,当你刷新页面时,参数就会丢失。
所以推荐使用query地形式传递参数。
最后谈谈$router和$route地区别
结论:没有任何关系
$router地类型时VueRouter,整个项目只有一个VueRouter实例,使用$router是实现路由跳转的,$router.push()。
跳转成功后,抵达某一个页面,此时要获取从上一个页面传递过来的参数,此时使用$route。
或者是$route.query.city,或者是$route.params.city。也就是说,$router和$route作用在路由不同的阶段。
<html> <head><meta charset="UTF-8"></head> <body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- use router-link component for navigation. --> <!-- specify the link by passing the `to` prop. --> <!-- <router-link> will be rendered as an `<a>` tag by default --> <router-link to="/foo">登幽州台歌</router-link> <router-link to="/bar">江雪</router-link> <router-link to="/city/中国">西安</router-link> <router-link to="/city/希腊">雅典</router-link> <router-link to="/book/史铁生">务虚笔记</router-link> <br> <router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br> <router-link :to="{ path: '/wuhan', query: {city: 'wuhan'}}">router2</router-link><br> <router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br> </p> <!-- route outlet --> <!-- component matched by the route will render here --> <router-view style="margin-top: 100px"></router-view> </div> <script> // 1. Define route components. // These can be imported from other files const Foo = { template: '<div>前不见古人,后不见来者。念天地之悠悠,独怆然而涕下!</div>'}; const Bar = { template: '<div>千山鸟飞绝,万径人踪灭。孤舟蓑笠翁,独钓寒江雪。</div>' }; const Capital = { template: '<div>时间已经摧毁了多少个西安城,雅典城。{{$route.params.country}}</div>' } const Book = {template: '<div>务虚笔记 ---by {{$route.params.author}}</div>'} const WuHan = {template: '<div>武昌, 汉口, 汉阳 --- {{$route.params.city}}</div>'} // 2. Define some routes // Each route should map to a component. The "component" can // either be an actual component constructor created via // Vue.extend(), or just a component options object. // We'll talk about nested routes later. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '/city/:country', component: Capital }, { path: '/book/:author', component: Book }, { path: '/wuhan/:city', name: 'wuhan', component: WuHan } ] // 3. Create the router instance and pass the `routes` option // You can pass in additional options here, but let's // keep it simple for now. const router = new VueRouter({ routes: routes }) /* function navigate() { router.push({ path: '/wuhan', params: { city: 'wuhan' } }); } */ // 4. Create and mount the root instance. // Make sure to inject the router with the router option to make the // whole app router-aware. const app = new Vue({router: router}).$mount('#app') // Now the app has started! </script> </body> </html>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。