vue-路由

路由配置

下载路由

方式一：创建项目时选择即可， 可直接用

方式二：命令下载： 需手动配置

1. 下载:

  npm install vue-router

2. main.js 中注册

3. 创建router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '@/components/HomeView.vue'
import Login from '@/components/Login.vue'

Vue.use(VueRouter)

const routes = [

  // 相关代码
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

路由使用

APP.vue------> 基本上不写其他内容

<template>
  <div id="app">
    <router-view>                                                // 写个<router-view> </router-view>

    </router-view>
  </div>
</template>

其他组件 （实现路由跳转 及 携带参数）

//---------------------------------路由跳转 方式一--------------------------------------

<template>
    <div>
        登录页面
        <router-link to="home"><button>点我进首页</button></router-link>         // to="router 中对应的 name 值"
    </div>
</template>

//---------------------------------路由跳转 方式二  动态绑定的方式  可带参数--------------------------------------

<template>
    <div>
        登录页面
        <router-link :to="path"><button>点我进首页</button></router-link>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 可带参数
            path: {
                name: 'home',
                query:{name: '孙悟空', age: 48}
            }

        }
    },
}
//---------------------------------路由跳转 方式三  js代码实现--------------------------------------

                              // -----------html 代码-------------
<template>
    <div>
        登录页面
        <button @click="aa">路由跳转</button>
    </div>
</template>

                              // -----------javascript 代码-------------
this.$router.push('home')

router/index.js ------> 配置路由

// 导入
import HomeView from '@/components/HomeView.vue'
import Login from '@/components/Login.vue'

// 配置路由
const routes = [
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  }
]

路由嵌套

1. main.js 注册

  {
    // --------一个路由下有两个子路由----------
    path: '/product',
    name: 'product',
    component: ProductView,

    // --------子路由---------
    children: [
      {
        path: 'detial',
        name: 'detial',
        component: Detial
      },
      {
        path: 'shopping',
        name: 'shopping',
        component: Shopping
      }
    ]
  },

2. 使用

比如 1 中， 在 ProductView 组件中 书写 <router-view> </router-view> 即可

3. 路由跳转

（1）方式一：静态

<router-link to="/product/shopping"></router-link>

（2）方式二：动态绑定

// ----------------html 代码---------------------
    <router-link :to="path1">购物</router-link> <router-link :to="path2">详情</router-link>

// --------------javascript 代码-------------------

    data() {
        return {
            path1: {
                name: 'shopping',
            },
            path2: {
                name: 'detial',
            }
        }
    },

（3）方式三：js操作

// ----------------html 代码---------------------
<button @click="click01">购物</button><button @click="click02">详情</button>

// --------------javascript 代码-------------------
methods: {
  click01() {
      this.$router.push('/product/shopping')
  },
  click02() {
      this.$router.push('/product/detial')
  }
}

路由守卫

-对路由进行权限控制

前置路由守卫

// 参数一： 到哪个路由， 参数二：从哪个路由来， next: 继续执行后续操作

router.beforeEach((to, from, next) => {

  console.log(to, from, next);                             // 可以打印看看是什么数据类型

  let flag = localStorage.getItem('孙悟空')
  if (to.name == 'detial') {
    if (flag) {
      next()
    } else {
      alert('没有权限！')
    }
  } else {
    next()
  }
})

后置路由守卫

router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.name
})

相关API

1. this.$router.push(path)        相当于点击路由链接(可以返回到当前路由界面
2. this.$router.replace(path)     用潞由替换当前路由(不可以返回到当前路由界面)
3. this.$router.batk()            请求(返回)上一个记录路由
4. this.$router.go(-1)            请求(返回)上一个记录路由
5. this.$rouler.ga(1)             请求下一个记录路由