Router-vue那些事鹅

声明式导航

1,导航高亮

class="router-link-active[router-link-exact-active(精确匹配)]"

router-link-active两个高亮类名的名字太长了,自定义:

//创建路由对象
const router = new VueRouter({
//配置路由规则
    router:[...],
    //自定义模糊匹配的类名
    linkActiveClass:'类名1',
    //自定义精确匹配的类名
    linkExactiveActiveClass:'类名2'
})

2,声明式导航的路由传参

• 查询参数传参:

语法:to="/path?参数名=值&参数名=值",

对应页面组件接收传递过来的值:$route.query.参数名

• 动态路由传参:

步骤:

0. 配置动态路由

//创建动态路由
const router = new VueRouter({
    routers:[
        ...,
        {
            path:'/search/:words',
            component:Search
        }
    ]
})

2.配置导航链接

to="/path/参数值"

3.对应页面组件接收传递过来的值

$route.params.参数名

[动态路由参数可选符:'/search/:words? ']

路由重定向:

解决问题:网页打开,url默认路径是/,未匹配到组件时,会出现空白

[匹配到path后,强制跳转path路径]

语法:{path:匹配路径,redirect:重定向到的路径}

const router = new VueRouter({
    routers:[
    //路由重定向
    {path:'/',redirect:'/home'},
        ...,
        {
            path:'/search/:words',
            component:Search
        }
    ]
})

Vue路由-模式设置

hash路由[默认] 例:http://localhost:8080/#/home

history路由: 例:http://localhost:8080/home[链接没有#但是需要后端支持]

编程式导航--基本跳转[可见的跳转标签]

编程式导航--用JS跳转[官方提供的跳转API]

• path路径跳转[简单方便]

this.$router.push('路由路径')
​
this.$router.push({
  path:'路由路径'})

这里就要区分一下route & router了------

$route--路由参数对象,专门用来获取参数

$router-路由对象,专门用来做路由跳转的,编程式导航

• name命名路由跳转[适合path路径长的场景]

//路由配置
{name:'路由名',path:'/path/&&',component:##}
//跳转
this.$router.push({
    name:'路由名'
})

编程式导航--路由传参

两种传参方式:

• 查询参数
• 动态路由传参

两种路由跳转对于两种传参方式都支持

1. path路径跳转传参(query传参)[path+查询参数]

//手动传参
this.$router.push('/路径?参数1=参数值1&...')
//官方的api来传参
this.$router.push({
    path:'/路径',
    query:{
        参数名1:'值1',
        参数名2:'值2'
    }
})

2.path+动态路由传参

this.$router.push(`/search/${this.words}`)
//完整写法:
this.$router.push({
    path:'/路径/参数值',
})

3.name+query传参

  this.$router.push({
      name:'search',
      query:{
        参数名:值}
})

4.name+动态路由

//配置路由参数
{name:'路由名',path:'/path/&&',component:##}
//跳转
this.$router.push({
    name:'路由名',
    params:{
        words:this.words
    }
})