vue学习笔记总结（vue-router的基本使用）

vue-router的基本使用

vue-router的安装配置

1. 使用npm install vue-router --save来安装vue-router插件模块

2. 在模块化工程中使用他(因为是一个插件，所以可以通过Vue.user来安装路由功能)

• 在src下创建一个router文件夹（一般安装vue-router时候会自动创建）用来存放vue-router的路由信息导入路由对象，并且调用Vue.use(VueRouter)
• 创建路由实例，并且传入路由映射配置
• 在vue实例中挂载创建的路由实例对象

router/index.js

/**
 * 配置路由相关信息
 * 1.先导入vue实例和vue-router实例
 */
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 2. 通过Vue.use(插件)，安装插件
Vue.use(Router)
//3. 创建 router路由对象
const routes = [
  //配置路由和组件之间的对应关系
  {
    path: '/',//url
    name: 'HelloWorld',
    component: HelloWorld 
  }
]
const router = new Router({
  //配置路由和组件之间的应用关系
  routes
})
//4.导出router实例
export default router

main.js中挂载router对象

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

vue-router的使用

1. 在componens文件夹下创建两个组件

Home组件

<template>
  <div class="page-contianer">
    <h2>这是首页</h2>
    <p>我是首页的内容</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
</style>

About组件

<template>
  <div class="page-contianer">
    <h2>这是关于页面</h2>
    <p>我是关于页面的内容</p>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>
<style scoped>
</style>

2. 配置路由映射

修改router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

// 2. 通过Vue.use(插件)，安装插件
Vue.use(Router)
//3. 创建 router路由对象
const routes = [
  //配置路由和组件之间的对应关系
  {
    path: '/home',//home 前端路由地址
    name: 'Home',
    component: Home //组件名
  },
  {
    path: '/about',//about 前端路由地址
    name: 'About',
    component: () => import('@/components/About') //懒加载组件
  }
]
const router = new Router({
  //配置路由和组件之间的应用关系
  routes
})
//4.导出router实例
export default router

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

路由和组件的常用两种懒加载方式：

• vue异步组件实现路由懒加载

  component：resolve=>([‘需要加载的路由的地址’，resolve])

• es提出的import(推荐使用这种方式)

  component：() => import(‘需要加载的模块地址’)

3. 路由使用：<router-link>和<router-view>

在app.vue中使用<router-link>和<router-view> 两个全局组件显示路由。

<router-link>是全局组件，最终被渲染成a标签，但是<router-link>只是标记路由指向类似一个a标签或者按钮一样，但是我们点击a标签要跳转页面或者要显示页面，所以就要用上<router-view>。

<router-view> 是用来占位的，就是路由对应的组件展示的地方，该标签会根据当前的路径，动态渲染出不同的组件。

路由切换的时候切换的是<router-view>挂载的组件，其他不会发生改变。

<router-view>默认使用hash模式，可以通过mode配置修改为history模式。

app.vue修改template

<template>
  <div id="app">
    <router-link to="/home">首页</router-link> |
    <router-link to="/about">关于</router-link>
    <router-view/>
  </div>
</template>

启动项目后，此时<router-view>在<router-link>下面，那渲染页面就在首页|关于下面，此时未配置路由的默认值，所以第一次进入网页的时候<router-view>占位的地方是没有内容的。

4. 配置路由的默认值

router/index.js

const routes = [
  {
    path: '',
    redirect: '/home'  //缺省时候重定向到/home
  },
  //配置路由和组件之间的对应关系
  {
    path: '/home',//home 前端路由地址
    name: 'Home',
    component: Home //组件名
  },
  {
    path: '/about',//about 前端路由地址
    name: 'About',
    component: () => import('@/components/About') //懒加载组件
  }
]

5. <router-link>的其他属性

1. to属性：用于跳转到指定路径。

2. tag属性：可以指定<router-link>之后渲染成什么组件使用, <router-link to='/home' tag='button'>会被渲染成一个按钮，而不是a标签。

3. relapce属性：在history模式下指定<router-link to='/home' tag='button' replace>使用replaceState而不是pushState，此时浏览器的返回按钮是不能使用的。

4. active-class属性：当<router-link>对应的路由匹配成功的时候，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

   • 在进行高亮显示的导航菜单或者底部tabbar时，会用到该属性

   • 但是通常不会修改类的属性，会直接使用默认的router-link-active

   • <router-link to='/home' tag='button' active-class='active'>此时被选中的<router-link>就会有active的class。

   • 如果每个<router-link>都要加上active-class='active'，那就在路由里面统一更改。

6. $router属性-通过代码修改跳转路由

将<router-link>换成button等任何组件，添加上点击事件，并写好点击事件响应方法，此时使用this.$router.push('/home')，push方法等价于pushState方法，replace 方法等价于replaceState方法。

$router属性

<template>
  <div id="app">
    <!-- <router-link to="/home" tag='button' replace active-class='active'>首页</router-link> |
    <router-link to="/about" active-class='active'>关于</router-link> -->
    <button @click="homeClick">首页</button>|
    <button @click="aboutClick">关于</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {// 通过代码的路径修改路由
      this.$router.push('/home')// push 等价于pushState
      // this.$router.replace('/home')// replace 等价于replaceState
      console.log("homeClick")
    },
    aboutClick() {
      this.$router.push('/about')
      // this.$router.replace('/about')// replace 等价于replaceState
      console.log("aboutClick")
    }
  }
}
</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;
}
.active {
  color: red;
}
</style>