前端模拟面试练习提升题

这里只是第一步使用router，最简单的一步先踏出去，不涉及动态路由、嵌套路由的使用。    
 
    刚听到路由的时候，只能大概知道可能这是与路径和目标有关。
 
    正确的来说，在web开发中，路由是指根据url分配到对应的处理程序。在我看来路由就像是指路牌，在这个url中('http://blog.csdn.net/qq_34131399/article/details/79393260'),我们可以将‘/***’这样的组合看成是我们站在一个有多个方向的路口，具体的如"/article"就是指我们去article的路牌。我们要到目的地要通过多个需要选择的路口，我们走的这一路，将经过的路牌串起来，就是url了。所以为了让我们的程序按照我们规划的路线行进，我们就要用到路由。
 
    这里的路由比起计算机其他方面的路由要简单得多，就是起到对页面组合替换进行源头到目的地的引导作用，就像a标签一样，你点了我，我就带你去指定的地方。
 
   vue中引用路由，我们要在创建项目时点选‘需要vue-router’，也可以后来再安装‘vue-router’，使用npm install vue-router进行安装。
 
 
 
    这里说一下router的三个容易混淆的概念:
 
    首先先看一下官方给的代码:
 
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
// 现在，应用已经启动了！
    上边有三个长的很像的，分别是router、route、routes,初学很容易就会看混淆。
 
 
 
    route:上边示例没有给出但是它是routes的单数形式，就是代表一个指路牌，有一个名字和指向的组件，like this ->{path:'/***',component:***}。
 
    routes:它的后边有个s，所以它就要高级一点，是route的复数形式，是一个route组成的数组，包含一组route。
 
    router:router是一个VueRouter的对象，用来管理路由，所以它内部肯定会有routes属性，还有其他的属性和方法。
 
 
 
    当我们要使用时，我们只需要配好路由，把每一个需要的路由配置好，然后将路由挂载到根实例上全局就都可以使用了。
 
    我用vue-cli创建的vue项目，里边就有个完整的vue并且带上路由的结构。
 
 
箭头所指就是路由管理的地方。我通常都是把所有的路由配到这里，这样统一管理也比较直观。
 
写了几个简单的，这里的组件都是.vue文件的组件。
 
import Vue from 'vue'
import Router from 'vue-router'
//引入.vue组件
import FindBack from '@/components/FindBack'
import AboutUs from '@/components/AboutUs'
import NearbyThing from '@/components/NearbyThing'
import FullForm from '@/components/FullForm'
 
 
 
 
Vue.use(Router)//声明使用Router
 
export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/a',//重定向
      name: 'FindBack',
      component: FindBack
    },
    {
      path: '/a',
      name: 'FindBack',
      component: FindBack
    },
    {
      path: '/c',
      name: 'AboutUs',
      component: AboutUs
    },
    {
      path: '/b',
      name: 'NearbyThing',
      component: NearbyThing
    }
  ]
})
 
因为在main.js文件中已经引入，所以我们就可以直接全局使用了。
 
使用有两种方法一种是类似a标签的使用，一种是用函数来使用。
 
1.标签式使用方法
 
<router-view></router-view> //这里先预留一个坑
 
<router-link to="/bar">Go to Bar</router-link>//当我们在页面上点击‘Go to Bar’时就将指向的组件填到页面上的坑里
2.函数式（编程式）使用方法
 
// 字符串 这里的字符串就是url的一个组成部分 比如'/****'
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
我觉得对于初学者来说，先不考虑后边三种使用方式。不过记得在使用时，我们要import你管理router的js文件。
 
 
 
现在我们来串一串流程:
 
管理路由的js文件
 
import Vue from 'vue'
import Router from 'vue-router'
 
import FindBack from '@/components/FindBack'//一下几个import都是引入.vue的组件文件
import AboutUs from '@/components/AboutUs'
import NearbyThing from '@/components/NearbyThing'
import FullForm from '@/components/FullForm'
 
Vue.use(Router)//向vue说明 我们要使用路由
 
export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/a',//匹配到这个字符串时我们重定向到'/a'这里来，也就是重新指向一个路由
      name: 'FindBack',
      component: FindBack
    },
    {
      path: '/a',
      name: 'FindBack',
      component: FindBack
    },
    {
      path: '/c',
      name: 'AboutUs',
      component: AboutUs
    },
    {
      path: '/b',
      name: 'NearbyThing',
      component: NearbyThing
    }
  ]
})
使用路由页面:
 
<template>
    <div id="app">
        <router-view v-on:nearbything_="changeBButtomStage"></router-view>
 
        <!-- 这里带参数调用函数 不同参数就匹配不同的路由 -->
        <button v-on:click='chooseMe(1)'>1</button>
        <button v-on:click='chooseMe(2)'>1</button>
        <button v-on:click='chooseMe(3)'>1</button>
    </div>
</template>
<script>
import router from "./router";//引入管理router的js文件
export default {
    data() {
        return {}
    },
    methods: {
        // 根据选择的按钮进行页面跳转 或者 按钮颜色变换
        chooseMe: function(i) {
            switch (i) {//判断选择哪一个路由 
                case 1:
                    router.push("/a");
                    break;
                case 2:
                    router.push("/b");
                    break;
                case 3:
                    router.push("/c");
                    break;
            }
        }
    }
</script>
另外还有其他的组件文件，选择不同路由就将不同的组件塞入预留的坑里。
 
————————————————