最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

当前快讯:vue-router的使用

来源：博客园
vue-router是vue基础工具的重要组成部分。通过简单的配置路由组件映射关系，可以实现vue页面轻松跳转。什么是前端路由它是URL地址与组件之间的对应关系，通常使用Hash地址与组件之间对应。浏览器的Hash地址就是URL地址中对应的锚链接地址, 如：location.href: 完整的URL地址。location.hash: URL地址中，#后面的部分，包括#。锚点链接点击跳转点击链接box3, 那么页面就滚动到box3对应的部分。
  
    box1    box2    box3    box4
前端路由的工作方式1.点击路由链接a标签2浏览器URL地址中的hash值发送变化3.前端路由监听到URL地址中的hash发生变化4.前端路由拿到hash值对应的组件component, 然后渲染到浏览器对应的位置。URL的hash地址与组件components的对应关系。

vue-router的实现原理

1.点击链接，切换url的hash地址

2.监听window.onhashchange浏览器hash地址变化，hash地址变化时，动态修改组件类型

<script>import Home from "@/components/Home/Home.vue"import Center from "./components/Center/Center.vue"import About from "./components/About/About.vue"export default {  name: "RouterDemoApp",  components: {    Home,    About,    Center  },  created () {    window.onhashchange = () => {      switch (location.hash) {        case "#/home":          this.comName = "Home"          break        case "#/center":          this.comName = "Center"          break        case "#/about":          this.comName = "About"          break      }    }  },  data () {    return {      comName: "Home"    }  },}</script>

vue-router的基本使用


(资料图)

1.在src目录下，创建router目录，然后创建index.js文件，在文件中添加路由配置如下
import Vue from "vue"import Router from "vue-router"import About from "@/components/About/About.vue"import Center from "@/components/Center/Center.vue"import Home from "@/components/Home/Home.vue"// 将Router安装为Vue的插件//Vue全局引入插件vue-router//Vue在调用vue-router的install方法时，会引入2个全局组件router-link, router-view//router-link: 和的作用一样，用于href调整链接//router-view: 代表要跳转的页面的展示位置Vue.use(Router)// 创建路由的实例对象//实例属性.$route和$.router的区别//$router: 拥有路由的所有方法， $route: 拥有路由的所有属性const router = new Router({  mode: "hash", //默认采用hash模式  routes: [    { path: "/home", component: Home },    { path: "/about", component: About },    { path: "/center", component: Center }  ]})export default router

2.在App.vue中，添加路由跳转入口和组件出口

3.在main.js中，添加路由实例挂载

import Vue from "vue"import App from "./App.vue"import routerObj from "@/router/index"Vue.config.productionTip = falsenew Vue({  render: h => h(App),  // 路由实例挂载  router: routerObj}).$mount("#app")

vue-router嵌套路由

如果当前组件下有根据路由展示的子组件，可以在当前路由匹配规则中添加children项，然后在对应数组中添加子路由的路由规则配置。如果要展示一个默认子路由，可以将这个子路由配置的path设置为""空字符串。
import Vue from "vue"import Router from "vue-router"import About from "@/components/About/About.vue"import Center from "@/components/Center/Center.vue"import Home from "@/components/Home/Home.vue"import Tab1 from "@/components/Tabs/Tab1.vue"import Tab2 from "@/components/Tabs/Tab2.vue"// 将Router安装为Vue的插件Vue.use(Router)// 创建路由的实例对象const router = new Router({  routes: [    // 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址    // 重定向：确定原来地址url是啥，看着不爽，要重定向到哪个url    { path: "/", redirect: "/home" },    // 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的    { path: "/home", component: Home },    // 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。    // 嵌套子路由的path配置无需是/开头，默认router会自动添加    {      path: "/about",      component: About,      // 默认子路由方法1：设置父路由的重定向地址      // redirect: "/about/tab1",      children: [        // { path: "tab1", component: Tab1 },        // 默认子路由方法2：在父路由的children中，设置默认路由的path:"", 这样表示父路由默认展示这个子路由        { path: "", component: Tab1 },        { path: "tab2", component: Tab2 }      ]    },    { path: "/center", component: Center }  ]})export default router

vue-router动态路由

当一类子路由会随业务不同而动态变化时，那么可以将这个路由的变化部分定义成参数{ path: "movie/:id", component: Movie }添加 props: true选项时，组件内可以通过props参数接收动态路由的路由参数。{ path: "movie/:mid", component: Movie, props: true }
import Vue from "vue"import Router from "vue-router"import About from "@/components/About/About.vue"import Center from "@/components/Center/Center.vue"import Home from "@/components/Home/Home.vue"import Tab1 from "@/components/Tabs/Tab1.vue"import Tab2 from "@/components/Tabs/Tab2.vue"import Movie from "@/components/Movie/Movie.vue"// 将Router安装为Vue的插件Vue.use(Router)// 创建路由的实例对象const router = new Router({  routes: [    // 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址    { path: "/", redirect: "/home" },    // 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的    { path: "/home", component: Home },    // 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。    // 嵌套子路由的path配置无需是/开头，默认router会自动添加    {      path: "/about",      component: About,      // 默认子路由方法1：设置父路由的重定向地址      // redirect: "/about/tab1",      children: [        // { path: "tab1", component: Tab1 },        // 默认子路由方法2：在父路由的children中，设置默认路由的path:"", 这样表示父路由默认展示这个子路由        { path: "", component: Tab1 },        { path: "tab2", component: Tab2 }      ]    },    {      path: "/center",      component: Center,      children: [        // id部分是可变路由的参数部分，它是随参数变化的。        // { path: "movie/:mid", component: Movie }        { path: "movie/:mid", component: Movie, props: true }      ]    }  ]})export default router

使用时，根据业务不同动态变化路由

vue-router动态路由参数传递

路由/参数传递
vue代码如下:用户1-----routes代码如下:{       // 路径里面传递参数是通过斜线传递的：比如/user/detail/1    path: "detail/:id",    name: "userDetail",    component: () => import("../view/UserDetail.vue")}----这种参数在组件里面如何获取呢？this.$route.params.id

路径？参数传递

用户1这种传递方式如何在组件里面获取参数呢？this.$route.query.id

声明式导航与编程式导航

声明式导航：通过在html中写a标签，在vue中写标签的方式，实现的跳转叫做声明式导航。编程式导航：通过调用API的方式实现的跳转，如location.href的方式，叫做编程式导航。
<script>export default {  name: "RouterDemoHome",  data () {    return {    }  },  mounted () {  },  methods: {    handlePush () {      // this.$router.push("hash地址")， 会产生历史记录      this.$router.push("/about/tab2")    },    handleReplace () {      // this.$router.replace("hash地址")，跳转到目标地址，并替代掉当前的历史记录      this.$router.replace("/center/movie/3")    },    handleGo () {      // this.$router.go(-1) go(正数)向前， go(负数)后退      this.$router.go(-1)    }  }}</script>

全局路由导航前置守卫

前置守卫的三种跳转方式

1.当前跳转满足跳转条件，则直接调用next()放行。2.当前跳转不满足跳转条件，需要跳转到登录进行登录认证，则调用next("/login")进行跳转。3.当前跳转不满足跳转条件，需要跳转到当前页面，刷新当前页，则调用next(false)进行刷新。router.beforeEach：每次路由跳转之前会调用这个路由守卫回调方法。可以在前置守卫中添加权限控制，比如只有localStore中保存了登录cookie，才进行方向，允许进入首页。
import Vue from "vue"import Router from "vue-router"import About from "@/components/About/About.vue"import Center from "@/components/Center/Center.vue"import Home from "@/components/Home/Home.vue"import Tab1 from "@/components/Tabs/Tab1.vue"import Tab2 from "@/components/Tabs/Tab2.vue"import Movie from "@/components/Movie/Movie.vue"import Main from "@/components/Main/Main.vue"import Login from "@/components/Login/Login.vue"// 将Router安装为Vue的插件Vue.use(Router)// 创建路由的实例对象const router = new Router({  routes: [    // 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址    { path: "/", redirect: "/home" },    // 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的    { path: "/home", component: Home },    // 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。    // 嵌套子路由的path配置无需是/开头，默认router会自动添加    {      path: "/about",      component: About,      // 默认子路由方法1：设置父路由的重定向地址      // redirect: "/about/tab1",      children: [        // { path: "tab1", component: Tab1 },        // 默认子路由方法2：在父路由的children中，设置默认路由的path:"", 这样表示父路由默认展示这个子路由        { path: "", component: Tab1 },        { path: "tab2", component: Tab2 }      ]    },    {      path: "/center",      component: Center,      children: [        // id部分是可变路由的参数部分，它是随参数变化的。        { path: "movie/:mid", component: Movie, props: true }      ]    },    { path: "/login", component: Login },    { path: "/main", component: Main }  ]})// 全局路由守卫，当每次路由跳转时，会先调用这个回调函数，判断是否可以继续跳转router.beforeEach((to, from, next) => {  /* must call `next` */  console.log(to)  if (to.path === "/main") {    const token = localStorage.getItem("login-token")    if (token) {      next()    } else {      next("/login")    }  } else {    // next：放行，如果运行路由跳转，则需要调用next()    next()  }})export default router

vue-router生命周期

1.全局beforeEach: 一般用来做权限控制。2.路由中beforeEnter: 用的不多3.组件里调用 beforeRouteEnter: 这个方法里面没有this4.全局 router.resolve5.全局 afterEach6.调用组件的 beforeRouterLeave: 离开是提醒，是否提交表单，是否关注等等7.beforeRouterUpdate 用在路由参数更新了，但是路由没有更新时使用。

关键词： 从上到下 参数传递