码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router(2)

时间:2018-07-30 21:42:43      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:重定向   ret   data-   amp   console   ref   export   ted   span   

1. 动态路由匹配

  • /home/123456 ---> resFul ---> params
  • /home?room_id=123456 ---> query

(1) resFul

(1.1) 通过$route.params获取id

  • <div>房间号:{{$route.params.id}}</div>
  • <div>成员Id:{{$route.params.mum_id}}</div>
routes: [{
            path:‘/home/:id/number/:mum_id‘,
            name:‘home‘,
            component: Home
        }]

 

(1.2) 监听

    watch: {
        $route(to,from) {
            console.log(to)
            console.log(from)
        }
    }

 

(2)query

2. 重定向

    {
        path:‘*‘,
        redirect:‘/home‘
    }
    {
        path:‘*‘,
        redirect:{name:‘home‘}
    }
    {
        path:‘*‘,
        redirect(to) {
            if(to.path === ‘/‘) {
                return ‘/home‘
            }else {
                return {path:‘/err‘}
            }
        }
    }

 


嵌套路由

命名视图


    export default new VueRouter({
        routes: [
            {
                path:‘/home/:id?‘,
                name:‘home‘,
                component: Home
            }
        ],
    
    })
    <template>
        <div>
            <div>我是{{title}}</div>
            <div>房间号:{{$route.params}}</div>
        </div>
    </template>
    <script>
    import Home from ‘../components/home‘
    export default {
        data() {
            return {
                title: ‘HOME‘
            }
        }
    }
    </script>

 

vue-router(2)

标签:重定向   ret   data-   amp   console   ref   export   ted   span   

原文地址:https://www.cnblogs.com/goff-mi/p/9392392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!