ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

【Vue2】Router 路由

2022-05-08 16:03:12  阅读：134  来源： 互联网

标签：vue router Vue2 import Router path 路由


 

1.什么是单页面应用程序

单页面应用程序(英文名: Single Page Application)简称SPA,

顾名思义，指的是一个Web网站中只有唯一-的一-个HTML页面，

所有的功能与交互都在这唯--的一个页面内完成。

 

结论:在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成!

 

4.什么是前端路由

通俗易懂的概念: Hash地址与组件之间的对应关系。

5.前端路由的工作方式

① 用户点击了页面.上的路由链接
② 导致了URL地址栏中的Hash值发生了变化
③ 前端路由监听了到Hash地址的变化
④ 前端路由把当前Hash地址对应的组件渲染都浏览器中

6、手写路由案例：

<template>
  <div id="app">
    <a href="#/index">首页</a> | 
    <a href="#/movie">电影</a> | 
    <a href="#/about">关于</a> 
    <component :is="routerName"></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',
  components: {
    Home,
    Movie,
    About
  },
  data() {
    return {
      routerName: ''
    }
  },
  created() {
    window.onhashchange = () => {
      const hash = location.hash
      switch (hash) {
        case '#/home':
          this.routerName = 'Home'
          break
        case '#/Movie':
          this.routerName = 'Movie'
          break
        case '#/About':
          this.routerName = 'About'
          break
      }
    }
  },
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

1.什么是vue-router

vue-router是vue.js官方给出的路由解决方案。

它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。

vue-router的官方文档地址: https://router.vuejs.org/zh/

 

2.使用Vue-Router步骤

① 安装vue-router包

npm i vue-router@3.5.2 -S

② 创建路由模块

router/index.js

// 导入资源配置
import Vue from 'vue'
import Router from 'vue-router'

// 安装Router插件
Vue.use(Router)

// 创建路由实例
const router = new Router()

// 导出Router实例
export default router

③ 导入并挂载路由模块

main.js文件中，Vue实例，入参路由实例

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// ES6 模块导入 如果提供的是一个目录地址，默认导入里面index名称文件
// import router from '@/router/index.js'
import router from '@/router/index.js'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

④ 声明路由链接和占位符

配置路由和地址的对应关系：

import Vue from 'vue'
import Router from 'vue-router'

// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

Vue.use(Router)

// 配置路由列表 path不需要写#号
const routes = [
  { path: '/home', component: Home },
  { path: '/movie', component: Movie },
  { path: '/about', component: About }
]

// 注册到路由实例中
const router = new Router({
  routes
})

export default router

 

更改原来的手写路由分配,App.vue：

改用 router-view占位符标签实现路由分配

<template>
  <div id="app">
    <a href="#/index">首页</a> | 
    <a href="#/movie">电影</a> | 
    <a href="#/about">关于</a> 
　　
    <router-view></router-view>
  </div>
</template>

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

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

可以使用router-link代替a标签，router-link本身还是使用a标签做的

      使用Router-link替换a标签
      <router-link to="/index">首页</router-link> | 
      <router-link to="/movie">电影</router-link> | 
      <router-link to="/about">关于</router-link>

 

2.1、懒加载路由

https://www.cnblogs.com/mindzone/p/13909668.html

 

3、路由重定向问题

新的问题是，进入页面后没有默认页，需要用户自己手动点击，才会跳转

所以需要把首页在进入页面时就路由进来，这个功能可以使用路由重定向来解决：

// 配置路由列表 path不需要写#号
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/movie', component: Movie },
  { path: '/about', component: About }
]

　　

 4、子路由和子路由占位符

路由配置：

import Vue from 'vue'
import Router from 'vue-router'

// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'

// 安装Router插件
Vue.use(Router)

// 设定路由的配置项
const routes = [
  { path: '/', redirect: '/index'},
  { path: '/index', component: Home },
  { 
    path: '/about', 
    component: About, 
    children: [
      // 子组件不能写斜杠开头, router会默认视为第一层级的规则来分配
      { path: 'tab1', component: SubPage1 },
      { path: 'tab2', component: SubPage2 }
    ]
  }
]

const router = new Router({
  routes
})

export default router

 

在About组件中编写对应的占位符：

<template>
  <div>
    <h3>关于 组件</h3>
    <p> 
      <router-link to="/about/tab1" >子页面1</router-link>
      <router-link to="/about/tab2" >子页面2</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

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

　　

5、默认子路由或者重定向

import Vue from 'vue'
import Router from 'vue-router'

// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'

// 安装Router插件
Vue.use(Router)

// 设定路由的配置项
const routes = [
  { path: '/', redirect: '/index'},
  { path: '/index', component: Home },
  { 
    path: '/about', 
    component: About, 
    // 方式一：使用重定向配置
    redirect: '/about/tab1',
    children: [
      // 方式二：使用默认子路由，省略路径实现
      // { path: '', component: SubPage1 },
      { path: 'tab1', component: SubPage1 },
      { path: 'tab2', component: SubPage2 }
    ]
  }
]

const router = new Router({
  routes
})

export default router

　

6、动态路由实现

类似Rest风格，根据参数动态渲染页面的内容，提高页面的复用性

<template>
  <div id="app">
      <router-link to="/movie/1">电影1</router-link> | 
      <router-link to="/movie/2">电影2</router-link> | 
      <router-link to="/movie/3>电影3</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

路由配置时，声明一个动态路径参数标记：

在vue-router中使用英文的冒号(:) 来定义路由的参数项。

import Vue from 'vue'
import Router from 'vue-router'

// 把路由对应的组件和Hash映射起来
import Movie from '@/components/Movie.vue'

// 安装Router插件
Vue.use(Router)

// 设定路由的配置项
const routes = [
  /**
   * 动态参数配置
   * 
   * props: true 开启props属性传参
   */
  { path: '/movie/:id', component: Movie },
]

const router = new Router({
  routes
})

export default router

 

组件会把路由的路径参数封装成对象获取，通过下面这段代码获取

this.$route.params.id

可以开启Props属性来接收参数

<template>
  <div>
    <!-- this.$route.params 可以获取路由的参数 -->
    <h3>电影 组件 </h3>
    <p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}
</script>

 

7、路径参数和查询参数

<template>
  <div>
    <h3>电影 组件 </h3>
    <p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
    <p> 路由Query查询参数 {{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}
</script>

在使用路由时，附加查询参数：

<template>
  <div id="app">
      <router-link to="/movie/1">电影1</router-link> | 
      <router-link to="/movie/2">电影2</router-link> | 
      <router-link to="/movie/3?aaa=100&bbb=true">电影3</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　

8、编码式路由的跳转

<template>
  <div>
    <!-- this.$route.params 可以获取路由的参数 -->
    <h3>电影 组件 </h3>
    <p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
    <p> 路由Query查询参数 {{ $route.query }}</p>
    <!-- 
      声明式导航，向上面这种直接写标签和路径的实现组件跳转被称为声明式导航
        普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航

      编程式导航, 利用浏览器API实现导航的方式
        普通网页中调用location.href跳转到新页面的方式，属于编程式导航
        5.1 vue-router中的编程式导航API
        vue-router提供了许多编程式导航的API,其中最常用的导航API分别是:
        ①this.$router.push('hash 地址') 跳转指定Hash地址，并增加一条历史记录
        ②this.$router.replace('hash 地址') 跳转指定Hash地址，并替换当前的历史记录
        ③this.$router.go(数值 n)， 
          在历史记录中进行前进和后退
          0 表示当前页
          -1 后退一页
          如果后退的页数超过了历史记录的上限，则原地不动
          1 前进一页
        在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法:
          ①$router.back()
          ②$router .forward()

        导航守卫：
          控制路由能否跳转
        
        全局前置首位
    -->
    <button @click="toMovie1"> 跳转到 电影1</button> <br>
    <button @click="toAbout"> 跳转到 关于</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  methods: {
    toMovie1 () {
      // 直接在 <router-view> 标签中跳转
      this.$router.push('/movie/1')
    },
    toAbout () {
      this.$router.push('/about')
    }
  },
}
</script>

　　

 

9、路由跳转守卫：

import Vue from 'vue'
import Router from 'vue-router'

// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'

// 安装Router插件
Vue.use(Router)

// 设定路由的配置项
const routes = [
  { path: '/', redirect: '/index'},
  { path: '/index', component: Home },
  { path: '/movie/:id', component: Movie, props: true  },
  { 
    path: '/about', 
    component: About, 
    redirect: '/about/tab1',
    children: [
      { path: 'tab1', component: SubPage1 },
      { path: 'tab2', component: SubPage2 }
    ]
  }
]

const router = new Router({
  routes
})

/**
 * 全局前置守卫
 * //调用路由实例对象的beforeEach 方法，即可声明“全局前置守卫”
 * //每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数"
 */
router.beforeEach(function(to, from, next) {
  // to是将要访问的路由的信息对象
  
  // from是将要离开的路由的信息对象
  
  // next 是一个函数，调用next() 表示放行，允许这次路由导航
  
  // console.log(`to -> ${JSON.stringify(to)}`)
  // console.log(`from -> ${JSON.stringify(from)}`)

  /**
   * 当前用户拥有后台主页的访问权限，直接放行: next()
   * 当前用户没有后台主页的访问权限，强制其跳转到登录页面: next('/login')
   * 当前用户没有后台主页的访问权限，不允许跳转到后台主页: next(false)
   */
  next()
})

export default router

 

9.1、局部组件路由配置：

https://www.cnblogs.com/mindzone/p/13910845.html

 

 

 

 

 

标签：vue,router,Vue2,import,Router,path,路由
来源： https://www.cnblogs.com/mindzone/p/16243372.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有