0
点赞
收藏
分享

微信扫一扫

孙卫琴的《精通Vue.js》读书笔记-命名路由


孙卫琴的《精通Vue.js》读书笔记-命名路由_javascript


路由可以通过name属性来设置名字,这样便于在其他场合引用路由。在src/router/index.js文件中,为Items组件以及Item组件的路由分别设定名字“items”和“item”:

    {
path: '/items',
name: 'items',
alias: '/products',
component: Items,
children:[
{
path: 'item/:id',
name: 'item',
component: Item
}
]
},
{
path: '/list',
redirect: { //重定向
name: 'items'
}
}

修改src/App.vue文件,在设置Items组件的导航链接时通过名字来指定路由:

<router-link v-bind:to="{ name: 'items'}">商品清单</router-link>

简写为:

<router-link :to="{ name: 'items'}">商品清单</router-link>

由于上述组件的to属性是一个对象表达式,所以需要通过v-bind指令来为to属性赋值。如果不使用v-bind指令,直接按照以下方式为to属性赋值,会把“{ name: ‘items’}”当作一个普通的字符串处理:

<router-link to="{ name: 'items'}">商品清单</router-link>

修改src/components/Items.vue文件,在设置Item组件的导航链接时通过名字来指定路由:

    <ul>
<li v-for="item in items" :key="item.id">
<router-link :to="{name: 'item', params: {id: item.id}}" >
{{item.title}}
</router-link>
</li>
</ul>

以上组件的to属性的取值为{name: ‘item’, params: {id: item.id}},params属性用来为路径中的id路径参数赋值。
做了上述修改后,再次运行helloworld项目,会发现通过路由的名字,也能在网页上正确地导航到Items组件和Item组件。

1.重定向

在index.js中增加一个路由,用于把“/list”重定向到名字为“items”的路由:

    {
path: '/list',
redirect: {
name: 'items'
}
}

通过浏览器访问:
http: //localhost:8080/#/list

会看到浏览器的地址栏中的URL会重定向到以下链接:
http: //localhost:8080/#/items

2.使用别名

在index.js中为Items组件的路由设定别名“/products”:

    {
path: '/items',
name: 'items',
alias: '/products',
component: Items,
……
}

通过浏览器访问:
http: //localhost:8080/#/products

会看到浏览器显示的网页与以下链接相同:
http: //localhost:8080/#/items

不过,在浏览器的地址栏,仍然保持URL为“http: //localhost:8080/#/products”,而不会像重定向那样,把地址栏的URL改为重定向后的链接。


举报

相关推荐

Vue.js 路由

0 条评论