首页 > 其他分享 >Vue（六）-cnblog

Vue（六）-cnblog

时间：2023-02-04 11:35:52浏览次数：56  
标签：Vue vue import router path cnblog 路由

Vue（六）

1. 前端路由

  • hash值与组件之间的对应关系

hash值代表url地址中#号后面的内容，

不同的hash地址对应不同的组件

  • 图解

1.2 简易路由

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <!-- 定义hash值 #号后面的内容 -->
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />

    <!-- 根据hash值与组件的关系，按需展示组件 -->
    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',

  data(){
    return {
      comName:'Home'
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  },

  // 在组件被创建的时候，绑定hash值是否变化

  created(){
    window.onhashchange=() => {

      // 根据hash值的不同按需展示组件
      if(location.hash==='#/home'){
        this.comName='Home'
      }else if(location.hash==='#/movie'){
        this.comName='Movie'
      }else if(location.hash==='#/about'){
        this.comName='About'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
  • 效果图

1.3 使用vue的官方路由

  1. 安装vue-router包
npm i [email protected] -S
  1. 创建路由模块(src/router/index.js)
// 这个文件就是路由的模块文件
// 导入Vue和Vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 给Vue装上路由插件

Vue.use(VueRouter)

// 插件路由的示例对象

const router =new VueRouter()

// 向外共享路由对象实例

export default router
  • 在main.js中使用router
import Vue from 'vue'
import App from './App2.vue'

// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'
// 导入路由模块

// 可以简写，如果给定路径为文件夹，则会默认去寻找下面的index.js
import router from "@/router"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 设置一个路由属性
  // router:router 简写
  router
}).$mount('#app')

1.4 一个路由案例

  • app2.vue
<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 定义链接，hash值 -->

    <!-- 使用router-link代替a链接 -->

    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    <hr />

    <!-- 定义路由占位符，代表将要被渲染的组件 -->
    <router-view></router-view>

    <!-- 在router/index.js文件中配置路由对应关系 -->
  </div>
</template>

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

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
  • index.js（router定义路由关系）
// 这个文件就是路由的模块文件
// 导入Vue和Vue-router
import Vue from "vue"
import VueRouter from "vue-router"

// 导入home，movie，about组件

import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
import About from "@/components/About.vue"

// 给Vue装上路由插件

Vue.use(VueRouter)

// 插件路由的示例对象

const router = new VueRouter({
  // 配置路由的对应关系
  routes: [
    { path: "/home", component: Home },
    { path: "/about", component: About },
    { path: "/movie", component: Movie }
  ]
})

// 向外共享路由对象实例

export default router

1.5 路由重定向

  • 访问的地址a不存在，强制跳转到地址c，从而展示特定的组件

  • 设置路由重定向（ /时跳转到/home）

const router = new VueRouter({
  // 配置路由的对应关系
  routes: [
    // 配置路由重定向
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    { path: "/about", component: About },
    { path: "/movie", component: Movie }
  ]
})

1.6 子路由嵌套

  • about路由嵌套tab1，tab2路由
<template>
  <div class="about-container">
    <h3>About 组件</h3>
    <!-- 嵌套子路由 -->

    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>


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

<style lang="less" scoped>
.about-container {
  min-height: 200px;
  background-color: skyblue;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
  • index.js确定路由的关系
// 这个文件就是路由的模块文件
// 导入Vue和Vue-router
import Vue from "vue"
import VueRouter from "vue-router"

// 导入home，movie，about组件

import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
import About from "@/components/About.vue"
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 给Vue装上路由插件

Vue.use(VueRouter)

// 插件路由的示例对象

const router = new VueRouter({
  // 配置路由的对应关系
  routes: [
    // 配置路由重定向
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    // 嵌套子路由的关系
    {
      path: "/about",
      component: About,
      redirect: "/about/tab1",
      children: [
        { path: "tab1", component: Tab1 },
        { path: "tab2", component: Tab2 }
      ]
    },
    { path: "/movie", component: Movie }
  ]
})

// 向外共享路由对象实例

export default router
  • 注意点

路由的children属性（一个数组）来定义子路由，子路由的path不用添加"/"，子路由可以是在父路由的基础上写路径

  • 效果图

1.7 默认子路由

  • 进入父路由时，直接进入默认子路由，而不需要使用重定向
  • path的路径为空
// 这个文件就是路由的模块文件
// 导入Vue和Vue-router
import Vue from "vue"
import VueRouter from "vue-router"

// 导入home，movie，about组件

import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
import About from "@/components/About.vue"
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 给Vue装上路由插件

Vue.use(VueRouter)

// 插件路由的示例对象

const router = new VueRouter({
  // 配置路由的对应关系
  routes: [
    // 配置路由重定向
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    // 嵌套子路由的关系
    {
      path: "/about",
      component: About,
      // redirect: "/about/tab1",
      children: [
        // 默认子路由
        {path:"",component:Tab1},
        { path: "tab1", component: Tab1 },
        { path: "tab2", component: Tab2 }
      ]
    },
    { path: "/movie", component: Movie }
  ]
})

// 向外共享路由对象实例

export default router

1.8 动态路由

  • 提高路由的复用性

  • 路由地址不同，但使用的是同一个组件

  • app2

<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 定义链接，hash值 -->

    <!-- 使用router-link代替a链接 -->

    <router-link to="/home">首页</router-link>
    <!-- <router-link to="/movie">电影</router-link> -->
    <!-- 根据不同的id，获取不同的电影详情页 -->
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-link to="/about">关于</router-link>

    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    <hr />

    <!-- 定义路由占位符，代表将要被渲染的组件 -->
    <router-view></router-view>

    <!-- 在router/index.js文件中配置路由对应关系 -->
  </div>
</template>

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

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
  • movie.vue
<template>
  <div class="movie-container">
  <!-- 路由对象 this.$route -->
    <h3>Movie 组件-----电影{{this.$route.params.mid}}</h3>
    <button @click="getmovie">获取电影信息</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',

  methods: {
    getmovie(){
      console.log(this);
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  min-height: 200px;
  background-color: lightsalmon;
  padding: 15px;
}
</style>
  • 路由配置index.js
// 修改路由规则，接收可变的参数
    { path: "/movie/:mid", component: Movie }
  • 效果图

1.9 动态路由接收参数的第二种方式

  • 路由配置开启props传参
 // 修改路由规则，接收可变的参数
    // 开启props传参
    { path: "/movie/:mid", component: Movie ,props:true}
  • Movie组件提高自定义属性来接收参数
props:{
    mid:{
      type:String
    }
  },

1.10 路径参数和查询参数

  • app2.vue
<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 定义链接，hash值 -->

    <!-- 使用router-link代替a链接 -->

    <router-link to="/home">首页</router-link>
    <!-- <router-link to="/movie">电影</router-link> -->
    <!-- 根据不同的id，获取不同的电影详情页 -->

    <!-- 路径参数：hash后面/后面的内容 -->
    <!-- 查询参数：hash后面？后面的内容 -->
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2?name=zs&age=18">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-link to="/about">关于</router-link>

    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    <hr />

    <!-- 定义路由占位符，代表将要被渲染的组件 -->
    <router-view></router-view>

    <!-- 在router/index.js文件中配置路由对应关系 -->
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
  • 效果图

2. 路由导航

  • 声明式导航

点击链接进行跳转，a链接，router-link链接

  • 编程式导航

调用api方法实现跳转，如location.href属性的修改

2.2 vue-router提供的导航api

实例

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <!-- 定义button按钮，实现跳转到电影1 -->
    <button @click="gotoMovie1">跳转到电影1</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoMovie1(){
      // 通过push方法跳转页面，存在历史记录
      // this.$router.push('/movie/1');
      // 通过replace方法跳转页面，无历史记录
      this.$router.replace('movie/1');
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  min-height: 200px;
  background-color: pink;
  padding: 15px;
}
</style>

2.3 导航守卫

  • 图解

2.4 全局前置守卫

  • 每次发生导航跳转时，都会触发全局前置守卫，通过守卫函数来进行权限控制

  • 配置：在路由index.js种配置

// 这个文件就是路由的模块文件
// 导入Vue和Vue-router
import Vue from "vue"
import VueRouter from "vue-router"

// 导入home，movie，about组件

import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
import About from "@/components/About.vue"
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 给Vue装上路由插件

Vue.use(VueRouter)

// 插件路由的示例对象

const router = new VueRouter({
  // 配置路由的对应关系
  routes: [
    // 配置路由重定向
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    // 嵌套子路由的关系
    {
      path: "/about",
      component: About,
      // redirect: "/about/tab1",
      children: [
        // 默认子路由
        {path:"",component:Tab1},
        { path: "tab1", component: Tab1 },
        { path: "tab2", component: Tab2 }
      ]
    },

    // 修改路由规则，接收可变的参数
    // 开启props传参
    { path: "/movie/:mid", component: Movie ,props:true}
  ]
})

// 全局前置守卫

// to 跳转到哪里（要访问的路由信息）
// from （从哪里来的路由信息）
// function:回调函数
router.beforeEach((to,from,next)=>{
  // next方法确定 是否允许跳转
  next()
  console.log(from);
  console.log('---------------------');
  console.log(to);
})

// 向外共享路由对象实例

export default router
  • 效果图

2.5 根据情况控制权限

2.6 控制后台主页的访问权限

router.beforeEach((to,from,next)=>{
  // next方法确定 是否允许跳转
  // next()
  // console.log(from);
  // console.log('---------------------');
  // console.log(to);

  // 判读是否有token权限
  if(to.path==='/main'){
    const token=localStorage.getItem('token');

    if(token){
      next()
    }else{
      next('/login')
    }
  }else{
    next()
  }
})

标签：Vue,vue,import,router,path,cnblog,路由
From： https://www.cnblogs.com/lingxin1123/p/17091142.html

相关文章

  • vue3
    Vue3的特性1.新的构建工具vite1.2基本使用vite基本使用：创建项目npminitvite-app项目名称或者yarncreatevite-app项目名称安装依赖npmi或者yarn启......
  • 1、配置vue项目支持es6语法-cnblog
    一些注意点1、配置vue项目支持es6语法在package.json文件中新增type节点package.json{"type":"module",}2.Vuex的挂载Vue.use方法调用了一个install的......
  • vue3 与vue2的区别-cnblog
    vue3与vue2的区别1.template节点vue2只允许一个根节点vue3允许多个根节点2.创建工具vue3：使用vite，也可使用vue-clivue2：使用vue-clivite创建3.调试工......
  • vue入门（二）-cnblog
    vue入门（二）1.过滤器一个函数在插值表达式中使用，对插值的值进行再处理{{username|toUpCase}}示例<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • vue入门（一）-cnblog
    vue入门（一）1.什么是vue一个框架（现有的解决方案）构造用户界面（操作html页面的内容）2.vue的特性数据驱动视图页面所依赖的数据发生变化时，vue会监听数据的变化，重新......
  • VUE学习笔记DAY01-cnblog
    webpack的使用（配合ppt）1.webpack前端工程化的具体解决方案作用代码压缩混淆处理浏览器端的JavaScript兼容性性能优化1.1基于webpack实现隔行变色npmij......
  • Vue（四）-cnblog
    Vue（四）1.生命周期一个组件从（创建->运行->销毁的整个阶段）生命周期函数：vue框架的内置函数，会随着组件的生命周期，自动按次序执行注意点生命周期强调整个时间段......
  • Vue（三） （Vue-cli）-cnblog
    Vue（三）（Vue-cli）1.单页面应用程序（SPA）一个web网站只有唯一的html页面2.vue-cli简化了webpack创建工程化Vue项目的全过程不需要自己去配置webpack，只需专心写页面2.......
  • vue页面加载闪烁的问题以及解决方案
    一、原因：问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果下图：加载闪烁问题效果  原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代......
  • vuejs从入门到精通——单文件组件(SFC)
    单文件组件(SFC)https://cn.vuejs.org/guide/scaling-up/sfc.html一、单文件组件(SFC)是什么？Vue的单文件组件(即*.vue文件，英文Single-FileComponent，简称SFC)是一种......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99