vue-router

什么是vue-router

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

包含的功能：

• 嵌套的路由/视图表。
• 模块化的，基于组件的路由配置。
• 路由参数，查询，通配符。
• 基于Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 链接
• HTML5 历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

12.1 安装与基本配置

安装 vue-router

npm install vue-router --save-dev

如果在一个模块化的工程使用它，必须通过Vue.use()明确的安装路由功能

//导入vue-router
import VueRouter from 'vue-router'

//显示声明使用vue-router
vue.use(VueRouter)

新建并导入组件

首先，在idea中新建一个组件。如content

再在app.vue中导入并使用：

<script>
  //导入组件
  import content from "./components/content";

export default {
  name: 'App',
  comments:{
    content   //显示的声明组件
  }
}
</script>

注：自定义组件中scoped 代表作用域，表示CSS效果只在当前模板中有效。

12.2 实现页面跳转

创建Main.vue

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

scoped代表作用域，表示CSS效果只在当前模板中有效。

创建content.vue

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "content"
}
</script>

<style scoped>

</style>

创建router/index.js

注：各目录下面的主配置文件，前端约定均以index.js命名，扫描时会自动扫描

//导入vue
import Vue from 'vue'
//导入vue-router
import VueRouter from 'vue-router'
//导入组件content
import content from "../components/content";
//导入组件Main
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径  相当于SpringMVC的@RequestMapping
      path: '/content',
      //常常会给路由一个名字
      name: content,
      //跳转的组件
      component: content
    },
    {
      path: '/main',
      name: Main,
      component: Main
    }
  ]
});

配置main.js

import Vue from 'vue'
import App from './App'
//导入路由配置文件，index作为主要配置文件会被自动识别
import router from './router'

Vue.config.productionTip = false
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

配置App.vue

  <div id="app">
    <h1>Vue-Router</h1>
    <!--路由跳转-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图-->
    <router-view></router-view>
  </div>

router-view用来展示挑战的页面内容

效果展示

如此，便实现了页面的动态挑战