前端路由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},]
})

效果：