vue项目router，路由入门使用教程

一、router是什么？

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

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

二、使用步骤

1.引入库

创建vue项目时勾选vue-router

2.在vue项目中生成的模板

自动生成的vue项目main.js中

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

路由配置文件/routr/index.js

代码如下（示例）：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/First',
      name: 'First',
      component: First
    }
  ]
})

3.在项目中使用路由

在helloworld.vue文件中写

<button @click="goFirst">前往第一个页面</button>

methods: {
    goFirst() {
      this.$router.push("/First");
    },
  },

在First.vue文件中写

<template>
  <div id="First">这是第一个页面</div>
</template>
<script>
export default {
  name: "First",
  data() {
    return {};
  },
};
</script>
<style scoped>
</style>

4.实现效果

该项目可在GitHub上下载

链接: https://github.com/NotBerlin/html-login/tree/dev_services_login-html.

下载解压，cmd命令框输入npm install下载依赖文件。

总结

good morning