vue router入门和安装

安装

使用命令 vue create 项目名 后选择第三个自定义创建

空格选择router 取消点linter开头选项

在安装完后运行会看到官方会提供两个页面用于测试路由跳转功能

简单入门

两个组件标签:

index.js注释解释

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//插件需要该语句才能使用
Vue.use(VueRouter)
//设置每个组件信息
const routes = [
  {
    path: '/',//链接地址
    name: 'Home',//别名
    component: Home//加载的组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //另外一种组件加载模式 路由懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
//实例化路由
const router = new VueRouter({
  routes
})
//暴露出来被使用
export default router

简单扩展

额外写一个跳转页面
在App.vue写入语句
<router-link to="/list">List</router-link>
此时页面上就会出现list按钮,但是没有内容
编写list组件

<template>
  <h2>这是一个额外扩展的List页面</h2>
</template>

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

<style scoped>

</style>

在router文件夹下的index.js下导入组件并注册组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import List from "@/views/List";
//插件需要该语句才能使用
Vue.use(VueRouter)
//设置每个组件信息
const routes = [
  {
    path: '/',//链接地址
    name: 'Home',//别名
    component: Home//加载的组件
  },
  {
    path: '/list',//链接地址
    name: 'List',//别名
    component: List//加载的组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //另外一种组件加载模式 路由懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
//实例化路由
const router = new VueRouter({
  routes
})
//暴露出来被使用
export default router

此时即可使用