前端路由VueRouter总结

简介：

Vue路由vue-router是官方的路由插件，能够轻松的管理 SPA 项目中组件的切换。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来vue-router 目前有 3.x 的版本和 4.x 的版本，vue-router 3.x 只能结合 vue2进行使用，vue-router 4.x 只能结合 vue3 进行使用

1.VueRouter的安装和引入

vue2版本执行命令

npm install vue-router@3.0.1

vue3版本执行命令

npm install vue-router@4

创建router文件夹和index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/discover',
      component: Discover
    },
    {
      path: '/my',
      component: My
    },
    {
      path: '/friend',
      component: Friends
    },
  ]
})

在main.js中添加代码引入挂载router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'


Vue.use(ElementUI);

//配置请求根路径
axios.defaults.baseURL="http://127.0.0.1:8789/";

//将axios作为全局的自定义属性，每个组件可以在内部直接访问
Vue.prototype.$http = axios;

Vue.config.productionTip = false;



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.VueRouter的常规使用方法

VueRouter的路由导航

创建Discover.vue，Friends.vue,My.vue并在App.vue使用导航显示

Discover.vue

<template>
    <div>
        <h1>发现音乐</h1>
    </div>
</template> 

Friends.vue

<template>
    <div>
        <h1>关注</h1>
    </div>
</template> 

My.vue

<template>
    <div>
        <h1>我的音乐</h1>
    </div>
</template> 

App.vue

<template>
  <div id="app">
    <!-- 声明路由链接 -->
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">关注</router-link>
    <!-- 声明路由占位标签 -->
    <router-view/>
  </div>
</template>

<script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
import Table from '@/components/Table.vue'
export default {
  name: 'App',
  data:function(){
    return {
      movies:[
        {id:1,title:"金刚狼",rating:"8.8"},
        {id:2,title:"金刚狼2",rating:"8.9"},
        {id:3,title:"金刚狼3",rating:"9.0"},
      ],
      tbdata:[]
    }
  },
  components:{
    First,
    Movie,
    Table
  }
}
</script>

<style>
#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/index.js的首页路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/discover'
    },
    {
      path: '/discover',
      component: Discover
    },
    {
      path: '/my',
      component: My
    },
    {
      path: '/friend',
      component: Friends
    },
  ]
})

 这一进入首页后默认重定向到/dicover路由

效果：

嵌套路由的使用

 在Discover.vue中新建子路由链接及占位显示标签

<template>
    <div>
        <h1>发现音乐</h1>
        <!-- 子路由链接 -->
        <router-link to="/discover/toplist">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view/>
    </div>
</template> 

 新建需要显示的子模块TopList.vue和PlayList.vue

TopList.vue

<template>
    <div>
        <h2>推荐</h2>
    </div>
</template> 

PlayList.vue

<template>
    <div>
        <h2>歌单</h2>
    </div>
</template> 

在router/index.js中通过children属性，嵌套声明子路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Discover from '@/components/Discover'
import My from '@/components/My'
import Friends from '@/components/Friends'
import TopList from '@/components/TopList'
import PlayList from '@/components/PlayList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/discover'
    },
    {
      path: '/discover',
      component: Discover,
      //通过children属性，嵌套声明子路由
      children:[
        {path:"toplist",component:TopList},
        {path:"playlist",component:PlayList}
      ]
    },
    {
      path: '/my',
      component: My
    },
    {
      path: '/friend',
      component: Friends
    },
  ]
})

效果：

动态路由

 

 编程式导航

导航守卫