Vuejs学习笔记(三)-14.vue-router的基本使用

1.创建vue init webpack vuerouter项目

2.不使用vue-router创建。

3.npm install vue-router --save 单独安装

4.创建/router/index.js文件

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 
 4 // 1.通过Vue.use(插件),安装插件
 5 Vue.use(VueRouter)
 6 
 7 // 2.创建VueRouter对象
 8 const router = new VueRouter({
 9   //配置路由与组件之间的关系
10   routes
11 })
12 
13 // 3.routes映射关系传入router实例中
14 const routes = [
15 
16 ]
17 
18 // 4.打包导出
19 export default router

5.项目main.js文件导入router，并在vue实例中使用router

main.js文件：

 1 import Vue from 'vue'
 2 import App from './App'
 3 //5.root组件引入路由
 4 import router from './router/index.js'
 5 
 6 Vue.config.productionTip = false
 7 
 8 /* eslint-disable no-new */
 9 // 6.Vue实例引入router对象
10 new Vue({
11   el: '#app',
12   router,
13   render: h => h(App)
14 })

以上步骤只是搭建了路由的框架，接下来配置路由与组件之间的关系，因此要先创建组件。

6.component下创建组件文件（about.vue,home.vue）

7.router/index.js中引用Home组件和About组件

8、配置路由与组件的映射关系：

备注：routes对应关系的代码必须写在创建router对象之前

9.root组件中使用<router-link><router-view>标签

router/index.js如下

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通过Vue.use(插件),安装插件
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes映射关系传入router实例中
10 const routes = [
11   {
12     path:'/home',
13     component:Home
14   },
15   {
16     path:'/About',
17     component:About
18   },
19 ]
20 
21 
22 // 2.创建VueRouter对象
23 const router = new VueRouter({
24   //配置路由与组件之间的关系
25   routes
26 })
27 
28 // 4.打包导出
29 export default router

App.vue如下：

 1 <template>
 2   <div>
 3     <router-link to="/home">首页</router-link>
 4     <router-link to="/about">关于</router-link>
 5     <router-view></router-view>
 6   </div>
 7 </template>
 8 
 9 <script>
10 
11 
12 export default {
13   name: 'App',
14 }
15 </script>
16 
17 <style>
18 
19 </style>

10.运行npm run dev，查看页面<router-link>本质上是a标签，<router-view>的作用就是占位，且等待vue的渲染展示对应组件内容

11.希望用户第一次进入，默认展示组件。

a.目前首次进入，不展示组件

b.需要在router/index.js中设置默认展示组件

当路径为空时，重定向到/home中

代码如下：

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通过Vue.use(插件),安装插件
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes映射关系传入router实例中
10 const routes = [
11   {
12     path:'',
13     redirect:'/home'
14   },
15   {
16     path:'/home',
17     component:Home
18   },
19   {
20     path:'/About',
21     component:About
22   },
23 ]
24 
25 
26 // 2.创建VueRouter对象
27 const router = new VueRouter({
28   //配置路由与组件之间的关系
29   routes
30 })
31 
32 // 4.打包导出
33 export default router

12.页面显示路径是哈希值，不好看，多了个#

去router/index.js文件中，创建VueRouter对象时，加一个mode：history即可

 1 import VueRouter from 'vue-router'
 2 import Vue from 'vue'
 3 import Home from '../components/Home'
 4 import About from '../components/About'
 5 
 6 // 1.通过Vue.use(插件),安装插件
 7 Vue.use(VueRouter)
 8 
 9 // 3.routes映射关系传入router实例中
10 const routes = [
11   {
12     path:'/',
13     redirect:'/home'
14   },
15   {
16     path:'/home',
17     component:Home
18   },
19   {
20     path:'/about',
21     component:About
22   },
23 ]
24 
25 
26 // 2.创建VueRouter对象
27 const router = new VueRouter({
28   //配置路由与组件之间的关系
29   routes,
30   mode:'history'
31 })
32 
33 // 4.打包导出
34 export default router

13.<router-link>的属性

a.to属性： to='/home'，指跳转的页面path

b.tag属性：默认是a标签，需要别的标签则 tag='button'

c.replace属性：没有这个属性时，会有history,页面可以回滚或则跳转类似 history.forward,history.back。使用replace就好比histroy.replaceState，没有Histroy

没有使用replace属性时，页面可以前后跳转

使用replace属性，不需要填属性值

d.默认class属性

class属性：这个属性表示在router-link对应路由匹配成功时，会自动给当前元素设置一个router-link-active的class,

router-link-exact-active 这个和嵌套组件有关系，暂时先不学习。

style中直接使用这个class即可,

e.觉得router-link-active这个class属性值太长，可以使用active-class属性进行修改

 1 <template>
 2   <div>
 3     <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>
 4     <router-link to="/about" replace="">关于</router-link>
 5     <router-view></router-view>
 6   </div>
 7 </template>
 8 
 9 <script>
10 
11 
12 export default {
13   name: 'App',
14 }
15 </script>
16 
17 <style>
18 .router-link-active {
19   color:red;
20 }
21 .active{
22   color:green;
23 }
24 </style>

首页使用的是自定义的active-class，

而关于使用的是默认的class属性 router-link-active

f.还有一种方式在router路由router/index.js中统一修改class

App.vue中定义active1

页面效果。如果router-link中没有定义active-class，则使用全局配置的active1，如果router-link中使用了自定义的active-class，则使用自己配置的active

因此首页仍然是绿色，而关于是黄色

Vuejs学习笔记(三)-14.vue-router的基本使用

推荐阅读