Vue-router路由实例

1.main.js:

import Vue from 'vue'
import {Button} from 'mint-ui'

import App from './App.vue'
import router from './router'

// 注册全局组件
Vue.component(Button.name, Button)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>', // 将<App/>渲染到页面的el元素中
  router // 注册路由器:
})

/*
1个函数:
  VueRoute: 路由构建函数, 用于创建路由器对象, 配置路由
2个对象
  $route: 代表当前路由的对象, 包含当前路由相关信息(path, params参数, query参数)
  $router: 代表路由器对象, 包含控制路由跳转的方法(push/replce/back())
3个标签
  <router-link>: 路由链接, 生成路由链接
  <router-view>: 路由视图, 显示当前路由组件
  <keep-alive>: 缓存路由组件对象
 */

2.router.js

/*
路由器对象模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import MessageDetail from '../pages/MessageDetail.vue'

Vue.use(VueRouter)

export default new VueRouter({
//默认模式为hash,可以转换为history模式,当为history模式时,访问路径不加  #
//history模式:存在问题,本地可以正常使用,但是打包后,无法访问静态资源, 会出现报错404
mode:'history',
  // 配置应用中所有的路由
  routes: [
    // 路由
    {
      path: '/about',
      component: About
    },

    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',  // 路径左侧的/代表根路径
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              path: '/home/message/detail/:id',
              component: MessageDetail
            },
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        }
      ]
    },

    // 自动跳转的路由
    {
      path: '/',
      redirect: '/about'
    }
  ]
})
// 定义全局前置守卫
  /*
  to: 目标路由对象
  from: 当前路由对象
  next: 用来控制路由跳转函数
   */
router.beforeEach((to, from, next) => {
  console.log('global beforeEach', to, from)
  // 当用户请求的是/b或/a时, 如果没有登陆, 自动跳转到/login
  if(to.path==='/a' || to.path==='/b') {
    if(!Vue.store.state.user._id) {
      return next('/login')
    }
  }
  // 放行
  next()
})

3.页面使用–01****

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="/home/message">Message</router-link></li>
      </ul>
      <hr>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style>

</style>

3.页面使用–02****

<template>
  <div>
    <ul>
      <li v-for="(m, index) in messages" :key="index">
        <router-link :to="`/home/message/detail/${m.id}?xxx=123`">{{m.title}}</router-link>
        <button @click="pushShow(m.id)">push查看</button>
        <button @click="replaceShow(m.id)">replace查看</button>
      </li>
    </ul>
    <button @click="$router.back()">返回</button>
    <hr>
    <router-view/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        messages: []
      }
    },

    mounted () {
      // 模拟从后台获取数据
      setTimeout(() => {
        const messages = [
          {id: 1, title: 'message001'},
          {id: 3, title: 'message003'},
          {id: 5, title: 'message005'}
        ]
        // 更新数据
        this.messages = messages
      }, 1000)
    },
    
    methods: {
      pushShow (id) {
        // console.log(this.$router)
        this.$router.push(`/home/message/detail/${id}`)
      },

      replaceShow (id) {
        this.$router.replace(`/home/message/detail/${id}`)
      }
    }
  }
</script>
<style>

</style>