vue路由重定向(redirect)和别名(alias)

责编:menVScode 2017-12-01 16:10 阅读(1878)

1、redirect : ' /路劲名字 '

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  routes:[
    { path:'/home', component:Home },
    { path:'/about', component:About }, 
    {
      path:'*',
      redirect:'/home'
    }
  ]
})

2、redirect : {  }

let router = new VueRouter({
  routes:[
    { path:'/home', component:Home },
    { path:'/about', component:About, name:'About' },//name代表当前的路由 
    {
      path:'*',
      //redirect:{ path:'/about' }
      redirect:{ name:'About' }
    }
  ]
})

3、redirect : ()=>{  },动态设置重定向的目标,函数接受一个参数,参数是一个对象,目标路劲的对象。

QQ截图20171201155241

let router = new VueRouter({
  routes:[
    { path:'/home', component:Home },
    { path:'/about', component:About, name:'About' },//name代表当前的路由 
    {
      path:'*',
     redirect:(to)=>{
        console.log(to) //目标路由对象,就是访问路劲的路由信息
        if(to.path==='/123'){
          return './home'
        }else if(to.path==='/456'){
          return {path:'/Document'}
        }else{
          return {name:'About'}
        }
      }
    }
  ]
})

4、alias  

        目前redirect重定向都会把地址栏中错误地址的,替换成重定向后的地址;现在需要地址栏还是错误的地址,但是页面显示重定向后的内容。

let router = new VueRouter({
  routes:[
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    }
  ]
});

        通过alias访问成功后,如果有设置router-link-active的样式,则不会显示。因为<router-link to="/home">home</router-link>

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码