vue路由

1, 路由：就是一一对应关系的集合。

2, 前端路由（单页应用程序）：一个url地址，对应哪个组件

3, 后端路由：一个接口地址，对应哪一段接口地址

4, vue-router 的理解：vue 的一个插件库，专门用来实现 SPA 应用

1.基本使用

安装vue-router，命令：npm i vue-router@版本号 或者 yarn add vue-router@版本号
导入,创建路由规则,导出到main.js文件(src/router/index.js 中操作 )

//src/router/index.js 中 

// 1.引入Vue 

import Vue from 'vue' 

//2.引入vue-router 
import VueRouter from 'vue-router' 

//3.使用路由插件
Vue.use(VueRouter) 

//4.引入需要对应路径展示的子组件 
import About from '../components/About' 
import Home from '../components/Home'

//5. 创建路由规则数组
const routes =[
{ name:'about', // 路由名称,可以省略 
  path:'/about', // 跳转路径 
  component:About   // 路径对应的组件
},  

  { name:'home', 
  path:'/home', 
  component:Home 
  }
  ] 
  
  //6.创建router实例对象，传入规则 
  
 const router= new VueRouter({ routes }) 
  
  //7. 导出路由
   export default router

main.js中导入,挂载路由

  // main.js中引入路由器 
  
  import router from './router' 
  
  // 在Vue实例上挂载路由 
  
  new Vue({ 
      router, // 挂载路由 
      render: (h) => h(App), 
  }).$mount('#app');

App.vue里面使用路由占位符

<template>
    <router-view> </router-view>
</template>

2. 路由导航

1. 声明式导航(链接导航)

vue-router提供了一个全局组件 router-link
router-link实质上最终会渲染成a链接, to属性等价于提供href属性(to无需#), 属性值填上要跳转的路径字符
router-link用于提供路由链接, 实现页面跳转, 并且自带导航高亮功能(自带类名is-active)
router-link语法

 <router-link to="要跳转的路径">发现音乐</router-link>


<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
  color: white;
  background: black;
}

2. 编程式导航

概念: 通过js代码实现页面跳转
语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

main.js - 路由数组里, 给路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

App.vue - 换成span 配合js的编程式导航跳转

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
      <span @click="$router.push('/find')">收藏</span> //行内式_的写法
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

注意点: this.$router和this$route的区别

this.$router 可以用于操作路由比如实现跳转的功能

this.$route 可以用户获取路由的信息比如路由传参

3. 路由传参

1. 声明式导航路由传参

1.1 query传参

语法:

在router-link上的to属性传值, 语法格式如下

/path?参数名=值

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

$route.query.参数名
步骤:

组件1 router-link上的to属性上面添加参数

 <router-link to="/my?name=周杰伦&age=18">我的音乐</router-link>

对应组件接收传递过来的值

<p>我叫 ---{{$route.query.name}}</p>
<p>我今年 ---{{$route.query.age}}</p>

1.2 params传参

语法:

index.js里重新配置路由规则

path: “/跳转路径/:参数名”

组件1 router-link上的to属性上面添加参数值

/path/参数值

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

$route.params.参数名
步骤:

index.js里面重新定义路由规则

{
    path: "/part",
    component: Part
  },
  {
    path: "/part/:username/:age", // 有:的路径代表要接收具体的值
    component: Part
  },

组件1 router-link上的to属性上面添加参数值

<template>
  <div>
       <router-link to="/my/刘德华/18">我的音乐</router-link>
   </div>
</template>

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

<template>
  <div>
       <p>人名: {{ $route.query.username }}</p>
       <p>年龄: {{ $route.query.age }}</p>
  </div>
</template>

总结:

?key=value传参: 用$route.query.key 取值

path/值传参提前在路由规则/path/:key 用$route.params.key 取值

2. 编程式导航路由传参

2.1 query传参

<template>
  <div>
    <h1> 我的歌单</h1>
    <h1> 我的歌单</h1>
    <h1> 我的歌单</h1>
    <button @click="fn">点击跳转</button>
  </div>
</template>

<script>
export default {
methods: {
  fn() {
  this.$router.push({
  path:'/find', //要跳转的页面
  query:{
    name:'张三'   //携带的参数
  }
})

  },
},
}

</script>

页面跳转之后,参数会传到跳转页面的url地址上面

2.2 params传参

1. 在路由配置里面对要跳转的页面添加name属性

 {
    path: "/my",
    name:'aa',
    component: My
  },

1. 根据name进行跳转

<template>
  <div>
    <h1> 我的歌单</h1>
    <h1> 我的歌单</h1>
    <h1> 我的歌单</h1>
    <button @click="fn">点击跳转</button>
  </div>
</template>

<script>
export default {
methods: {
  fn() {
this.$router.push({
  name:'aa',
  params:{
    age:30
  }
})

  },
},
}

</script>

1. 在跳转的页面接收参数

<p>{{$route.params.age}}</p>

注意点:

path跳转页面只能和query 配合

name跳转页面可以和query 或者 params配合

4. 路由其他配置

均在router/index.js文件中配置

1. 路由重定向

网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径
放在路由规则数组的第一项

例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

总结: 强制重定向后, 还会重新来数组里匹配一次规则

2. 404页面设置

如果路由未命中任何规则, 给出一个兜底的404页面

创建NotFound页面

<template>
  <img src="../assets/404.png" alt="">
</template>

<script>
export default {

}
</script>

<style scoped>
    img{
        width: 100%;
    }
</style>

导入组件,配置路由规则, 放到数组的最后一项

import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

3. 路由模式设置

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

4. 全局前置守卫

路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

使用例子: 在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面

const isLogin = false
router.beforeEach((to, from, next)=>{
 console.log(to);  // {name: 'bb', meta: {…}, path: '/find', hash: '', query: {…}, …}
if(to.path==='/my' && isLogin===false) {
  next(false)
  alert('未登录,不允许访问')
} else{
  next()
}
})

5. 路由嵌套

在现有的一级路由下, 再嵌套二级路由

router/index.js 里面配置路由规则,使用children配置项(children是固定属性名,不能随意更改),并且导入对应的二级组件

//配置规则
const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend", //recommend 为路径名
        component: Recommend //Recommend 为组件对象
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]


//导入二级组件
import Recommend from '../components/children/Recommend.vue'
import Ranking from '../components/children/Ranking.vue'
import SongList from '../components/children/SongList.vue'

一级页面中设置router-view和router-link显示二级路由页面

   <div class="nav_main">
      <router-link to="/find/recommend">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
      <router-link to="/find/songlist">歌单</router-link>
    </div>
    
    <div style="1px solid red;">
      <router-view></router-view>
    </div>

6. 路由组件缓存

作用：让不展示的路由组件保持挂载，不被销毁。

步骤:

需要先给要区分的组件们, 设置name字段和值

<script>
    export default {
        name: '组件名'
    }
</script>

在keep-alive的时候, 使用include/exclude区分即可 注意:缓存多个组件的时候,组件名中间的逗号后面不能有空格

<!-- 缓存一个路由组件 --> 

<keep-alive include="News">
   <router-view> </router-view>
</keep-alive>

<!-- 缓存多个路由组件 --> 
<keep-alive :include="[News,Message]">
    <router-view> </router-view>
</keep-alive>

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

Vue-路由知识总结