路由进阶

路由模块封装

import Find from '@/views/Find'
import My from '../views/My'
import Friend from '../views/Friend'
​
//导入
import vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//VueRouter插件初始化
const router = new VueRouter({
routes:[
  {path:'/find',components:Find},
  {path:'/my',component:My},
  {path:'/friend',component:Friend}
]
​
​
​
})
​
//加入导出
export default router

导航设置

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友音乐</router-link>
    </div>
    <div class="top">
      <!-- 路由出口，匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

router-link两个类名区别

修改router-link的两个类名

import Find from '@/views/Find'
import My from '../views/My'
import Friend from '../views/Friend'

//导入
import vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//VueRouter插件初始化
const router = new VueRouter({
routes:[
  {path:'/find',components:Find},
  {path:'/my',component:My},
  {path:'/friend',component:Friend}
],
//link自定义高亮类名
linkActiveClass:'active',//配置模糊匹配的类名
linkExactActiveClass:'exact-active'//配置精确匹配的类名




})

//加入导出
export default router

跳转传参

<template>
  <div class="search">
    <p>搜索关键字： {{$route.query.key}}    </p>
    <p>搜索结果</p>
    <ul>
        <li>...................</li>
        <li>...................</li>
        <li>...................</li>
        <li>...................</li>
    </ul>

  </div>
</template>

<script>
export default {
name:'MyFriend',
created(){
    
}
}
</script>

<style>
.search{
    width: 400px;
    height: 240px;
    padding: 0 20px;
}

</style>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
        <input type="text">
        <button>搜索一下</button>
    </div>
    <div class="hot-link">
        热门搜索:
        <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
        <router-link to="/search?key=前端培训">前端培训</router-link>
        <router-link to="/search?key=如何称为前端大牛">如何称为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
name:'FinderMusic'
}
</script>

<style>

</style>

动态路由参数可选符

路由重定向

重定向：匹配path后，强制跳转path路径

语法：path:匹配路径，redirect:重定向到的路径

const router =new VueRouter({
    router:[
        { path:'/',redirect:'/search'},
        {path:'/home',component:Home},
        {path:'/search/:words',component:search}
    ]
})

vue路由-404

作用：当路径找不到匹配时，给个提示页面 位置：配在路由后面 语法：path:"*"(任意路径)-前面不匹配就命中最后这个

const router =new VueRouter({
    router:[
        { path:'/',redirect:'/search'},
        {path:'/home',component:Home},
        {path:'/search/:words',component:search},
        {path:'*',component:NotFound}
    ]
})

模式设置

编程式导航

1.通过路径方式跳转

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
        <input type="text">
        <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
        热门搜索:
        <router-link to="/search/黑马程序员">黑马程序员</router-link>
        <router-link to="/search/前端培训">前端培训</router-link>
        <router-link to="/search/如何称为前端大牛">如何称为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
name:'FinderMusic',
methods:{
    goSearch(){
        //通过路径方式跳转
        //1.this.$router.push('路由路径')
        // this.$router.push('/search')
        this.$router.push({
            path:'/search'
        })
    }
}
}
</script>

<style>

</style>

name命名路由跳转

（适合path路径长的场景） 需要要先在index .js取名 { name：'search' path:'/search/:words',component:search},

goSearch(){
        //通过路径方式跳转
        //1.this.$router.push('路由路径')
        // this.$router.push('/search')
        this.$router.push({
            // path:'/search'
            name:'search'
        })
    }

路由传参

两种跳转方式都支持任一传参

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
        <input v-model="inpValue" type="text">
        <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
        热门搜索:
        <router-link to="/search/黑马程序员">黑马程序员</router-link>
        <router-link to="/search/前端培训">前端培训</router-link>
        <router-link to="/search/如何称为前端大牛">如何称为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
import searchVue from './search.vue'
export default {
name:'FinderMusic',
data(){
    return{
        inpValue:''
    }
},
methods:{
    goSearch(){
        //通过路径方式跳转
        //1.this.$router.push('路由路径')
        // this.$router.push('路由路径？参数名=参数值')
        // this.$router.push('/search')
        // this.$router.push(`/seach?key=${this.inpValue}`)
        this.$router.push({
            path:'/search',
           query:{
            key:this.inpValue
           }
        })
    }
}
}
</script>

<style>

</style>