vue路由

路由简介

生活中的路由

设备和ip的映射关系

生活中的路由

后端路由

接口和服务的映射关系

后端路由

前端路由

路径和组件的映射关系

前端路由

为什么使用路由

在一个页面里，切换业务场景

vue单页面应用(SPA):所有的功能在一个html页面上实现

优点：

  • 整体不刷新页面，用户体验好
  • 数据传递容易，开发效率高

缺点：

  • 开发成本高(需要学习专门知识)
  • 首次加载比较慢，不利于SEO

vue-router介绍

vue集成路由

https://router.vuejs.org/zh/

vue-router模块包，它和vue.js深度集成

定义映射规则—–模块化—提供2个内置全局组件

路由-组件分类

.vue文件分2类，一个页面组件，一个是复用组件

.vue文件本质无区别

src/views(pages)文件夹 —页面组件—配合路由使用

src/components文件夹 —复用组件(展示数据–复用)

页面与复用组件

总结:views下的页面组件，配合路由切换；components下的一般引入到views下的vue中复用展示数据

vue-router使用

安装

npm i vue-router@3.5.1

导入路由

src下创建router/index.js

import Vue from 'vue'
// 1导入路由
import VueRouter from 'vue-router'
// 引入组件
// import Home from '../views/Home'
// import Login from '../views/Login'
// import Register from '../views/Register'

// 2 使用路由插件
// 在vue中  使用vue的插件  需要调用Vue.use()
Vue.use(VueRouter)

// 3 创建vue路由规则
const routes = [
  // 路径和组件的映射关系
  {
    path: '/',
    // component: Home,
    // 路由懒加载
    component: () => import('../views/Home'),
  },
  {
    path: '/login',
    component: () => import('../views/Login'),
  },
  {
    path: '/register',
    component: () => import('../views/Register'),
  },
]

// 4创建路由对象  传入规则
const router = new VueRouter({
  // routes: routes,
  routes,
})

// 导出路由对象
export default router

关联到vue实例

import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')
// .$mount挂载到 id="app"的元素上  相当于el选项

路由出口

App.vue

<router-view></router-view>

声明式导航

使用全局组件 router-link来替代a标签

  • vue-router提供了一个全局组件 router-link
  • router-link 实质上最终会渲染成a链接，to属性等价于提供href属性(to无需#)
  • router-link提供了声明式导航高亮的功能(自带类名)
<template>
  <div>
    <div class="nav">
      <router-link to="/">首页</router-link>
      <router-link to="/login">登陆</router-link>
      <router-link to="/register">注册</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.nav {
  display: flex;
  width: 400px;
  justify-content: space-around;
}

.router-link-exact-active {
  color: red;
}
</style>

重定向

强制切换到目标path上

  • 网页打开url默认hash值是 / 路径
  • redirect 是设置要重定向到那个路由路径

需求：网页默认打开，匹配路由 ‘/’ 强制切换到 ‘/home’上

const routes = [
  {
    path: '/',
    redirect: '/home', //重定向到  /home
  },
  }

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

路由-404页面

如果路由hash值没有和数组里规则匹配

默认给一个404页面

路由最后，path匹配 *(任意路径) –前面都不匹配，就匹配最后这个，显示对应的组件

  • 创建NotFound页面

    <template>
  <div>404</div>
</template>

<script>
export default {}
</script>

<style scoped></style>

  • 修改路由配置

    const routes = [
     // 写在最后
  // {
  //   path: '*',
  //   redirect: '/home',
  // },
  {
    path: '*',
    component: () => import('../views/NotFound'),
  },
]

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

路由模式设置

修改路由在地址栏的模式

hash路由 ： 地址栏URL中的#符号 http://localhost:3000/#/abc ，不会被包括在HTTP请求中，对后端完全没有影响，改变hash不会重新加载页面

history路由：http://localhost:3000/abc(需要服务器支持，否则找的是文件夹)

​ 利用了HTML5 新增的pushState() 和replaceState()方法

// 4创建路由对象  传入规则
const router = new VueRouter({
  // routes: routes,
  routes,
  mode: 'history', //默认是hash
})

vue路由-编程式导航

编程式导航：用js代码跳转

声明式导航：router-link实现跳转

语法：

this.$router.push({
    path:"路由路径",
    name:"路由名"
})

router/index.js 路由规则里，给路由起名字

const routes = [
  // 路径和组件的映射关系
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home'),
  },
  {
    path: '/login',
    name:"login",
    component: () => import('../views/Login'),
  },
  {
    path: '/register', 
    name:"register",
    component: () => import('../views/Register'),
  },

]

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

<template>
  <div>
    <div class="nav">
      <!-- <router-link to="/">首页</router-link>
      <router-link to="/login">登陆</router-link>
      <router-link to="/register">注册</router-link> -->
      <span @click="goTo('/home', 'home')">首页</span>
      <span @click="goTo('/login', 'login')">登录</span>
      <span@click="goTo('/register', 'register')">注册</span@click=>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

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

嵌套路由

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

嵌套路由

  • 创建需要用的所有组件
    • src/views/Find.vue —-发现音乐
    • src/views/My.vue—我的音乐
    • src/views/Second/Recommend.vue —发现音乐/推荐页面
    • src/views/Second/Ranking.vue —发现音乐/排行榜
    • src/views/Second/SongList.vue —发现音乐/歌单页面
  • main.js 配置2级路由
    • 一级路由由path从/开始定义
    • 二级路由往后path 直接写名字 ，无需 / 开头
    • 二级路由在上级路由的children数组里编写路由信息对象
  • 说明
    • App.vue 的router-view 负责发现音乐 和我的音乐页面 切换
    • Find.vue的router-view负责发现音乐下的三个页面切换
配置路由规则
const routes = [
  {
    path: '/',
    redirect: '/find', //重定向到  /home
  },
  {
    path: '/find',
    redirect: '/find/recommend',
    component: () => import('../views/Find'),
    children: [
      {
        path: 'recommend',
        component: () => import('../views/Second/Recommend'),
      },
      {
        path: 'ranking',
        component: () => import('../views/Second/Ranking'),
      },
      {
        path: 'songlist',
        component: () => import('../views/Second/SongList'),
      },
    ],
  },
  {
    path: '/my',
    component: () => import('../views/My'),
  },
  {
    path: '*',
    component: () => import('../views/NotFound'),
  },
]
App.vue写路由出口

App.vue 的router-view 负责发现音乐 和我的音乐页面 切换

<template>
  <div>
    <div class="nav">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.nav {
  display: flex;
  width: 400px;
  justify-content: space-around;
}
</style>
Find.vue写二级路由出口

Find.vue的router-view负责发现音乐下的三个页面切换

<template>
  <div>
    <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>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.nav_main {
  background-color: red;
  color: white;
  padding: 10px 0;
}
.nav_main a {
  text-align: center;
  text-decoration: none;
  color: white;
  margin: 7px 20px;
  padding: 0px 15px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
}
.nav_main a:hover {
  background-color: brown;
}

.nav_main .router-link-exact-active {
  background-color: brown;
}
</style>

总结:嵌套路由，找准在那个页面里写router-view和对应的规则里写children

声明式导航–类名区别

router-link 自带的2个类名的区别是什么

router-link-active（模糊匹配） url中hash值，包含href属性值这个路径

router-link-exact-active(精确匹配) url中hash值路径，与href属性值完全相同，设置此类名

原文地址：http://www.cnblogs.com/wmdaixuexi/p/16882084.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性