Vue快速入门学习笔记(四)

243 阅读1分钟

十八、vue-router路由

1. 什么是vue-router

Vue Router是Vue.js官方的路由管理器(路径跳转)。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

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

2. 安装

先查看node_modules中是否存在 vue-router

  • vue-router是一个插件包,所以我们还是需要用 npmcnpm 来进行安装的:
npm install vue-router --save-dev
  • 安装完之后去node_modules路径看看是否有vue-router信息,有的话则表明安装成功。

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

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

3. 实例demo

  1. 项目文件夹中主要存在三个文件:
  • ./src/App.vue
  • ./src/main.js
  • ./index.html

这三个文件的关系是 index.html 调用main.js 调用App.vue

  • index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>myvue</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>
  • main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
  • App.vue
<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App'
}
</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;
}
</style>
  1. main.js中导入vue-router路由插件:
// 导入路由插件
import VueRouter from 'vue-router'
  1. main.js显示声明使用VueRouter
//显示声明使用vue-router路由
Vue.use(VueRouter)
  1. components目录下,定义一个Content组件和Main组件:
  • Content组件:
<template>
  <div>
    <h1>内容页</h1>
    <h3>学科</h3>
    <ul>
      <li>Linux</li>
      <li>Java</li>
      <li>Vue</li>
    </ul>
    <h3>怎么学</h3>
    <ol>
      <li>看文档</li>
      <li>看视频</li>
      <li>做笔记</li>
    </ol>
  </div>
</template>

<script>
  export default {
    name: "Content"
  }

</script>

<style scoped>

</style>
  • Main组件:
<template>
  <div>
    <h1>个人介绍</h1>
    <ul>
      个人主页:
      <a href="http://melodyhub.ltd">melodyhub.ltd</a>
    </ul>
  </div>
</template>

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

</script>

<style scoped>

</style>
  1. 创建src/router目录,专门存放路由。

  2. 创建src/router/index.js主配置文件:

  • index.js:Vue官方命名规则,主配置文件,实现全局配置
    • path:路由路径,类似Spring中的@RequestMapping
    • name:路由名称
    • component:跳转到组件
import Vue from 'vue';
//导入路由插件
import VueRouter from 'vue-router';
//导入自定义组件
import Content from '../components/Content.vue';
import Main from '../components/Main.vue';

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径,类似Spring中的@RequestMapping
      path: "/content",
      //路由名称
      name: "content",
      //跳转到组件
      component: Content,

    }, {
      //路由路径
      path: "/main",
      //路由名称
      name: "main",
      //跳转到组件
      component: Main,
    }
  ]
})
  1. 第6步只是配置了路由,但未启用路由,在main.js中启用上述配置的路由:
  • router:全局唯一
  • 通过router/index.js主配置文件,实现全局配置
import Vue from 'vue'
import App from './App.vue'

//导入路由配置目录,自动扫描里面的路由配置
import router from './router'

//来关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  //配置路由
  router,
  render: h => h(App),
}).$mount('#app')
  1. App.vue中使用路由:
<template>
  <div id="app">
  <h1>vue-router Demo</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!-- 控制路由页面展示 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</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;
}
</style>
  1. 运行npm run dev,测试、查看效果。