vue学习笔记（路由命名、视图、redirect、alias、router.push、路由组件传参）

1.路由命名

<router-link to="/user/1/name/admin">admin</router-link>//可以用以下方式实现
<router-link :to="{name:'staff',params:{id:1,username:'admin'}}">admin</router-link>|

2.命名视图

一个路由可以关联多个组件组成

components:{
                        default:UserInfos,
                        home:Home,
                        about:About,

                    }

<router-view name="home"></router-view>
 <router-view name="about"></router-view>

3.编程式导航

$this.router.push 注意区分this.$route和this.$router

在user.vue中添加，则点击admin或tourist后跳转到如下页面

mounted(){
        this.$router.push({name:'staff',params:{id:3,username:'testuser'},repalce:true});
       // this.$router.replace({name:'staff',params:{id:3,username:'testuser'}});
    }

this.$router.push('/test');
this.$router.push({name:'staff',params:{id:3,username:'testuser'}});
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

4.重定向redirect和别名alias：

{ 
                path: '/about2', 
                redirect:'/about',
                
            },
            { 
                path: '/about', 
                alias:'/myabout',
                name:'aboutpage',
                component: About 
            },

输入about2后 自动变为about,而别名不会修改，是让两个路径指向了同一个component

也可以重定向到命名的路由

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
{ 
                path: '/about2', 
                redirect:{name:'aboutpage'},
                
            }

5.路由组件传参——解决路由的紧耦合

路由数组中添加props:true

                path: '/user/:id(\\d+)/name/:username', 
                name:'staff',
                component: User ,
                props:true,

使用页面接收数组，则可以在页面中直接使用

My id is{{ id }},name is {{ username }}
    <p>  
        <router-link :to="'/user/'+  id + '/name/'+username+'/test'">嵌套测试</router-link> 
    </p>
export default {
    name:'UserVue',
    props:['id','username'], 

也可以强制传递参数

path: '/user/:id(\\d+)/name/:username', 
name:'staff',
component: User ,props:{id:5},

点击admin后

点击嵌套测试后

因为点击嵌套测试后路径中使用的usrname没有使用对应的方式传递进来，所以是undefine