Vue路由

路由安装

路由作用：自定义组件和路由之间的跳转

命令：

# vue版本为2则安装：

npm install vue-router@3 --save

# vue版本为3则安装：

npm install vue-router@4 --save

如果已经使用脚手架安装好的了路由，就不在需要使用该命令

路由的使用

前置工作：

1 、删除 router 文件夹下的 index.js 文件

2 、删除 main.js 文件中路由相关的内容

若src目录下没有router目录，则自己新建一个router目录，在新建一个index.js文件。

步骤一：搭建路由的映射关系

①在 router 文件夹中创建 index.js 文件，输入如下

 

//1、导入路由相关的内容
import vue from 'vue'
import vueRouter from 'vue-router'

//2、使用vue.use()安装路由功能
Vue.use(vueRouter)

const routes =[
   // 设置路由和组件的映射
]

//3、创建路由对象，类似于创建vue实例
const router=new vueRouter({
    routes
})

//4、将router对象导出，在vue实例中使用
export default router

②在 main.js 文件中导入创建好的路由

步骤二：使用路由进行切换

①在component文件夹中，新建组件Home.vue

<template>
    <div>
        <h2>HOMDE首页</h2>
        <p>我是首页内容</p>
    </div>
</template>

<script>
export default({
    name: "Home"    
})
</script>
<style >
</style>

②在index.js文件中配置映射

//1、导入路由相关的内容
import Vue from 'vue'
import VueRouter from 'vue-router';

// 引入Home组件
import HomePage from '../components/HomePage.vue'

//2、使用vue.use()安装路由功能
Vue.use(VueRouter)

const routes =[
   // 设置路由和组件的映射
    {
        path: "/home",
        component: HomePage
    }
]

//3、创建路由对象，类似于创建vue实例
const router=new VueRouter({
    routes
})

//4、将router对象导出，在vue实例中使用
export default router

③在 App.Vue 中使用

效果如下：