路由配置

路由配置

一、vue-router 安装和基本路由

① 安装 vue-router 包 ：npm i vue-router@3.5.2 -S【vue2项目用这个，最新版的只支持vue3，】

② 创建路由模块：@/router/index.js 进行配置

③ 导入main.js并挂载路由模块

④ 声明路由链接和占位符

① 安装 vue-router 包

根据不同的地址打开、关闭不同的组件，#开头才是hash地址

这里以创建Home和User两个组件来作例

②创建@/router/index.js，在其中配置

1.导入VueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'

2.把VueRouter安装为Vue项目的插件

Vue.use(VueRouter)

3.创建路由实例对象，在路由规则中声明路由链接

// routes是一个关键字数组，用于定义 hash地址 与 组件 的对应关系
// redirect用于重定向，当用户访问 / 则直接强制跳转到 /home

const router = new VueRouter({
    routes:[
        { path: '/' , redirect: '/home'},
        { path: '/home' , component: Home},
        { path: '/user' , component: User}
    ]
})

4.向外共享路由的实例对象

export default router

5.创建需要路由的组件

@/components/aHome.vue

  <div>
    <h1>这里是首页！</h1>
  </div>

@/components/aUser.vue

  <div>
    <h3>这里是用户！</h3>
  </div>

6.导入需要路由的组件

import Home from '@/components/Home.vue'
import User from '@/components/Home.vue'

③ 在main.js中导入

1.导入VueRouter 路由模块

import router from '@/router/index.js'
// 可简写如下，会自动找到文件夹内的index.js
//import router from '@/router'

2.挂载

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

④在App.vue的template中添加占位符

<router-view></router-view>

⑤进行测试：

<!-- 用于测试，注意这里需要# -->
<a href="#/home">首页</a>
<a href="#/user">用户</a>

⑥改进：配置router-link来替代a链接

<!-- 这里不需要#，它自己会添加 -->
<router-link to="/home">首页</router-link>
<router-link to="/user">用户</router-link>

二、实现嵌套路由

原理：在link中嵌入view，view里面再放两个link，link又是放一个view，这里就结束了。

在用户组件下创建两个组件：用户1、用户2，并在用户组件中添加两个链接方便索引

①在aUser.vue中

  <div>
    <h1>这里是用户！！</h1>
    <router-view></router-view>
    <hr />
    <router-link to="/user/user1">用户1</router-link>
    <router-link to="/user/user2">用户2</router-link>
  </div>

②创建子组件

@/components/tab/tab1.vue、@/components/tab/tab2.vue内容

  <div>
		<h1>你好，我是用户1/2！</h1>
  </div>

③在@/router/index.js中配置

导入

import User1 from '@/components/tab/tab1.vue'
import User2 from '@/components/tab/tab2.vue'

加入

const router = new VueRouter({
    routes:[
        { path: '/' , redirect: '/home'},
        { path: '/home' , component: Home},
		{ path: '/user' , component: User, children:[			
			//可添加一个属性redirect:'/user/user1'默认路由user1，点击用户时会自动打开与下面的{path: '' , component: User1}同功能
            // 设定子路由规则
            {path: '' , component: User1},
            {path: 'user2' , component: User2},
        ]},
      ]  
    })

注：User里的链接地址要和router/index.js里面的path一致

三、实现动态路由

动态路由：把hash地址可变的部分定义为参数，用 “:”，提高复用性

①在app.vue

<router-link to="/movie/1">电影2</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影2</router-link>

②在@/router/index.js

改进一：

原本

{ path: '/movie/1' , component: Movie},
{ path: '/movie/2' , component: Movie},
{ path: '/movie/3' , component: Movie},

改进

{ path: '/movie/:mid' , component: Movie},

{{this.$route.params.mid}}这是电影的id，this.$route是路由的参数对象。this.$route是路由的导航对象。

改进二：

在indexjs

//为路由规则开启props传参
{ path:'movie/:mid',component:Movie,props:true}

在movievue

export default{
props:[],
}

{{mid}}此时，这是电影的id

四、编程式导航

push、replace、to

声明式导航

通过链接跳转的，如a链接，router-link链接

编程式导航

浏览器中调用API实现导航。

this.$router.push('address_hash')
this.$router.replace('address_hash')
this.$router.go(N)

例：编程式导航

①Home.vue

template

<button @click="gotoLoki">push跳转到洛基</button>
<button @click="gotoLoki2">replace跳转到洛基</button>

script

methods: {
    gotoLoki(){
      // $router.push会留有一条历史记录
      this.$router.push('/movie/1')
    },
    gotoLoki2(){
      // $router.replace不留历史记录
      this.$router.replace('/movie/1')
    },

②app.vue

template

<span><button @click="goBack2">后退两下</button></span>
<!-- $router.back() ，$router.forward() 实现前进、后退一层（自带）-->
<span><button @click="this.$router.back()">back后退</button></span>
<span><button @click="this.$router.forward()">forward前进</button></span>

script

methods:{
    // $router.go实现导航的前进、后退(n)位
    goBack2(){
      this.$router.go(-2)
    }
  }

导航守卫

用于保卫后台主页，防止用户通过url直接访问到后台。

①@/components/Home.vue

template

<router-link to="/main">访问后台主页</router-link>
<button @click="getToken">就不登录，直接请求token</button>

script

这是一个仿token。

getToken(){
      localStorage.setItem('token', 'Bearer xxxx')
}

②@/router/index.js

只要发生了路由的跳转，就触发 beforeEach（）

1.访问后台主页，则判定是否有token，有则进入，无则强制跳转到登录页

2.不访问后台主页，直接放行

router.beforeEach(function(to, from, next) {
    if (to.path === '/main') {
      const token = localStorage.getItem('token')
      if (token) {
        next()
      } else {
        alert("您没有访问权限，请登录！")
        next('/login')
      }
    } else {
      next()
    }
  })

对多个路径设置全局守卫

@/router/pathArr.js

导出不可直接访问的路径

export default ['/home', '/home/users', '/home/rights']

@/router/index.js

对这些路径全部设定全局守卫

// 全局前置守卫
router.beforeEach(function(to, from, next) {
  if (pathArr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    // 登录的路由规则
    { path: '/login', component: Login },
    // 后台主页的路由规则
    {
      path: '/home',
      component: Home,
      redirect: '/home/users',
      children: [
        { path: 'users', component: Users },
        { path: 'rights', component: Rights },
        { path: 'goods', component: Goods },
        { path: 'orders', component: Orders },
        { path: 'settings', component: Settings },
        // 用户详情页的路由规则
        { path: 'userinfo/:id', component: UserDetail, props: true }
      ]
    }
  ]
})

前置知识

手动模拟路由是很累的，就像是要在做饭了，自己从开始打造一口锅子。

/movie/2?name=zs

/后的参数，是路径参数。/movie/2是路径参数。this.$params.path来访问
?后面的参数，是查询参数。name=zs是查询参数。this.$params.query来访问
/movie/2?name=zs，是完整的值。this.$params.fullpath来访问这一完整的路径

SPA

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现