Vue学习—深入剖析VueRouter基础

一、深入剖析VueRouter基础

1.什么是路由？

路由是根据不同的url地址展现不同的内容或页面。
早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。
后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。

2.什么时候使用前端路由？

前端路由更多用在单页应用上，也就是SPA(Single Page Web Application)，在单页面应用中，大部分页面结果不变，只改变部分内容的使用。

3.安装路由

安装：npm install vue-router。

4.使用路由

5.JavaScript

1. 引入路由

import VueRouter from 'vue-router';

2. 使用路由

Vue.use(VueRouter);

3. 定义路由组件

// 可以从其他文件 import 进来
const Foo = {
    
     template: '<div>foo</div>' }
const Bar = {
    
     template: '<div>bar</div>' }

4. 定义路由

// 每个路由应该映射一个组件
const routes = [
  {
    
     path: '/foo', component: Foo },
  {
    
     path: '/bar', component: Bar }
]

5. 创建 router 实例，然后传 routes 配置

const router = new VueRouter({
    
    
  routes 
})

6. 创建和挂载根实例

const app = new Vue({
    
    
  router
}).$mount('#app')

7. 最后

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

5.hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

6.history 模式

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
在路由配置中设置：

VueRouter({
    
    
  mode: 'history',
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id, 也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

7.实例：

//App.vue
<template>
  <div id="app">
    <div class="nav-box">
      <div class="logo">我的博客</div>
      <div class="nav-list">
        <router-link to="/">首页</router-link>//最后默认生成a标签，可使用tag自定义
        <router-link to="/learn">课程学习</router-link>
        <router-link to="/student">信息展示</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/activity">社区</router-link>
      </div>
    </div>
    <div class="container">
      <router-view></router-view>//路由匹配到的组件将渲染在这里
    </div>
  </div>
</template>

<script>

export default {
    
    
  name: 'app',
  components: {
    
    
  },
}
</script>

<style scoped>
.nav-box {
    
    
  display: flex;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
  background-color: #3385ff
}

.nav-box .logo {
    
    
  color: #fff;
}

.nav-list a {
    
    
  margin-left: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-list a.router-link-exact-active {
    
    
  font-weight: bold;
}

.container {
    
    
  margin-top: 60px;
}

.nav-box,
.container {
    
    
  padding-left: 200px;
  padding-right: 200px;
}
</style>

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router';//单独设置路由
import "./assets/reset.css";//css样式重置文件

Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App),
  router,//router实例
}).$mount('#app')

//touter.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home';

Vue.use(VueRouter);

const routes = [{
    
    
    path: '/',
    component: Home,
  },
  {
    
    
    path: '/learn',
    component: () => import('./views/Learn'),
  },
  {
    
    
    path: '/student',
    component: () => import('./views/Student'),
  },
  {
    
    
    path: '/about',
    component: () => import('./views/About'),
  },
  {
    
    
    path: '/activity',
    component: () => import('./views/Activity'),
  }];

export default new VueRouter({
    
    
  mode: 'history',//history模式
  routes,//将实例导出
  // linkActiveClass: '****',可更改选中时的样式名
  // linkExactActiveClass: '****'
});

通过.router-link-exact-active来设置选中时的样式

//      ./views/About
<template>
  <div class="about">
    关于
  </div>
</template>