「Vue」路由

Vue-router
router-link active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
路由传参:
a.query方式
<router-link to='/login?id=10&name=zs' >登录</router-link>
var login = {template:'<h2>登录组件--{{this.$route.query.id}}</h2>'}
b.params方式 这种方式需要严格的按照path的规定方式传参
<router-link to='/reg/2/ss'>注册</router-link>
{path:'/reg/:id/:name', component: reg} :id是占位符
var reg = {template:'<h2>注册组件--{{$route.params.id}}</h2>'}
路由嵌套:children应用
routes:[
  {path:'/cout',
  component: cout,
  children:[
    {path:'login',component:login},
    {path:'reg',component:reg},
    ]
  },
 ],
<template id="cout">
  <div>
    <h2>主界面</h2>
    <router-link to='/cout/login'>登录</router-link>
    <router-link to='/cout/reg'>注册</router-link>
    <router-view></router-view>
  </div>
</template>
<router-link to='/cout' >主页</router-link>
<router-view></router-view>
路由命名视图:

猜你喜欢

转载自www.cnblogs.com/wrxblog/p/10504458.html