view 冒号作用 组件中属性_vue-router的使用方法以及含参数的配置

html

router-link：跳转链接

参数to：就是跳转到的链接位置

二层链接 eg：

/users/evan

需要配置所对应的对应的children

children所对应的参数

path：可分我固定的参数url 和带参数的 区别于 ：(冒号)name：对应的参数的模块名称(动态传参数)

component:可以传多个组件

eg：

{ path: '/',

// a single route can define multiple named components

// which will be rendered into s with corresponding names.

components: {

default: Foo,

a: Bar,

b: Baz

}

},

:to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}"

参数说明params 对应的是children的path的值 ，to中的name为vueRouter中的name

当要传多个参数时

{ path: ':username/:aaa', name: 'user', component: User }

也可以利用query传值

query: { foo: 'bar' }

eg: path: ':username'

redirect：链接直接指向指定的方向(重定向)

beforeEnter：

·

{ path: '/dashboard', component: Dashboard, beforeEnter: requireAuth },functionrequireAuth (route, redirect, next) {if (!auth.loggedIn()) {

redirect({

path:'/login',

query: { redirect: route.fullPath }

})

}else{

next()

}

}

使用props将组件和路由解耦：

在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。

对应的参数的值的获取

{ {$route.params.username1 }}

{ path: '/users', component: Users,

children: [

{ path: ':username', name: 'user', com