命名路由、重定向和别名

最新推荐文章于 2024-01-31 08:42:58 发布

dremcl

最新推荐文章于 2024-01-31 08:42:58 发布

阅读量402

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/dremcl/article/details/105404038

版权

命名路由

有时候，通过一个名称来表示一个路由显得更方便一些，特别是在连接一个路由，或者是执行一些跳转的时候。可以在创建 router 实例的时候，在 routes 配置中给某个路由设置名称。

consy router = new VueRouter({
     routes: [
      {
         path: '/user/:userId',
         name: 'user',
         component: User
         }
        ]
        })

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar （侧导航）和 main （主内容）两个视图，这个时候命名视图就派上用场了，可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上s）：

const router = new VueRouter({
     routes:[
      {
         path:'/',
         components:{
            default: Foo,
            a: Bar,
            b: Baz
       }
    }
 ]

代码：

<body>    
     <div id="app">        
         <div class="header">            
              <router-view name="header"></router-view>        
         </div>        
         <div class="body">            
              <router-view name="left"></router-view>            
              <router-view name="right"></router-view>        
         </div>        
         <div class="footer">            
              <router-view name="footer"></router-view>        
         </div>    
    </div>
</body>

<script>    
    headerc = Vue.extend({template:"<h1>header部分</h1>"})    
    leftc = Vue.extend({template:"<h1>leftc部分</h1>"})    
    rightc = Vue.extend({template:"<h1>rightc部分</h1>"})    
    footerc = Vue.extend({template:"<h1>footerc部分</h1>"})    
    var router = new VueRouter({
        routes: [            
            {path:"/", components:{              
                 header:headerc,              
                 left: leftc,              
                 right: rightc,              
                 footer: footerc,              
             }}        
         ]    
  })
   new Vue({        
        el: "#app",        
        router:router    
        })
</script>

重定向和别名

重定向也是通过 router 配置来完成，下面例子是从 /a 重定向到 /b :

const router = new VueRouter({
    routes:[
       {path: '/a', redirect:'/b'}
       ]
     })

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
    routes:[
       {path: '/a', redirect:{name: 'foo' }}
       ]
     })

```重定向的意思是，当用户访问 /a时，url 将会被替换成 /b , 然后匹配路由为/b , 那么 “别名”又是什么呢？ /a 的别名是 /b ,以为着，当用户访问 /b时，url 会保持为 /b,但是路由匹配则为 /a，就像用户访问 /a一样。路由配置为：

const router = new VueRouter({
    routes:[
       {path: '/a', redirect:A, alias: '/b'}
       ]
     })

dremcl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
命名路由、重定向和别名

命名路由有时候，通过一个名称来表示一个路由显得更方便一些，特别是在连接一个路由，或者是执行一些跳转的时候。可以在创建 router 实例的时候，在 routes 配置中给某个路由设置名称。consy router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'us...
复制链接

扫一扫