Vue-Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

https://router.vuejs.org/zh/

主要包含的功能

l  嵌套的路由/视图表

l  模块化的、基于组件的路由配置

l  路由参数、查询、通配符

l  基于 Vue.js 过渡系统的视图过渡效果

l  细粒度的导航控制

l  带有自动激活的 CSS class 的链接

l  HTML5 历史模式或 hash 模式，在 IE9 中自动降级

l  自定义的滚动条行为

安装vue-router

npm install --save -dev vue-router

 

在项目中新建一个router文件夹，用来存放路由相关文件

 

 

 

 

在router文件夹中的index.js文件中，设置注册router和路由

 1 import vue from "vue"
 2 import vueRouter from "vue-router"
 3 import Home from "../views/Home.vue"
 4 vue.use(vueRouter)
 5 let router=new vueRouter({
 6     routes:[
 7         {
 8             path:'/home',
 9             component:Home
10         }
11     ]
12 })
13 
14 export default router

 

在main.js文件中的Vue中注册router

 

 1 import Vue from 'vue'
 2 // 相对路径引入的App.vue文件
 3 import App from './App.vue'
 4 // 引入ui框架
 5 import elementUi from 'element-ui'
 6 //引入css
 7 import 'element-ui/lib/theme-chalk/index.css'
 8 //使用element-ui
 9 Vue.use(elementUi)
10 // 引入iview-ui框架
11 import iviewUi from "view-design"
12 //引入css
13 import 'view-design/dist/styles/iview.css'
14 //使用iview-ui
15 Vue.use(iviewUi)
16 //引入国际化
17 import i18n from "./lang/index.js"
18 //引入路由router
19 import router from "./router/router"
20 console.log(router)
21 new Vue({
22     // 渲染节点
23     render: h => h(App),
24     i18n:i18n,
25     //挂在router
26     router:router
27 }).$mount('#app')

 

 

 

 

此时我们在页面中输入对应的路由，不会显示该组件的页面，因为我们少了一个“小电视”

我们在App.vue中放置一个router-view组件，这个组件是内置的组件，作用就是显示路由跳转的组件页面

 1 <template>
 2 <div>
 3     <!-- 显示区域 -->
 4     <router-view></router-view>
 5 </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10 
11 }
12 </script>
13 
14 <style scoped>
15 
16 </style>

此时我们手动在浏览器中输入/home

 

 

 

我们也可以切换路由，我们在新建一个Sport.vue文件

 

 

 

 在router.js文件中引入注册

 1 import vue from "vue"
 2 import vueRouter from "vue-router"　　　　　　//引入路由router
 3 import Home from "../views/Home.vue"　　　　//相对路径引入的App.vue文件
 4 import Sport from "../views/Sport.vue"
 5 
 6 vue.use(vueRouter)　　　　　　//注册使用router
 7 let router=new vueRouter({
 8     routes:[
 9         {
10             path:'/home',
11             component:Home
12         },
13         {
14             path:'/sport',
15             component:Sport
16         }
17     ]
18 })
19 
20 export default router

 

此时我们切换路由就可以显示为：