vue基础19（vue的路由系统【Vue Router】）-优快云博客

本文详细介绍如何在 Vue 项目中设置和使用 Vue Router 进行页面间的跳转。从项目搭建开始，逐步介绍如何定义路由、配置路由组件以及如何在 App.vue 中实现导航菜单和路由视图。

vue的路由系统【Vue Router】

一、前期准备

1、在src文件夹下创建components文件夹
2、创建三个单vue实例文件（里面随便写点）


单个vue文件示例


<template>
    <div class="course">
        <h1>课程</h1>
    </div>
</template>

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

<style scoped>

</style>

前期准备

二、main.js文件

1、安装

npm install vue-router --save

npm版安装方法

2、引用 vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

main.js文件中添加

3、定义好路由组件/并引用

// 定义路由组件
// 可以从其他文件 import 进来
import Vmain from './components/Vmain'
import Vmaked from './components/Vmaked'
import Vcourse from './components/Vcourse'

// ./components/Vcourse:组件存放位置

main.js文件中

4、定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
    {path:'/', component:Vmain},
    {path:'/maked', component:Vmaked},
    {path:'/course', component:Vcourse}
];

main.js定义路由

5、创建 router 实例，然后传 `routes` 配置

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes
});

main.js中创建 router 实例

6、创建和挂载实例

// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
Vue.use(VueRouter);
//创建和挂在根式实例
new Vue({
  el: '#app',
  router,    // 这就是挂载根实例
  render: h => h(App)
});

main.js中创建和挂载根实例。

8、main.js文件最终效果

import Vue from 'vue'
//一个.vue就是一个组件
import App from './App.vue'
//导入
import VueRouter from 'vue-router'
// 定义路由组件
// 可以从其他文件 import 进来
import Vmain from './components/Vmain'
import Vmaked from './components/Vmaked'
import Vcourse from './components/Vcourse'

const routes = [
    {path:'/', component:Vmain},
    {path:'/maked', component:Vmaked},
    {path:'/course', component:Vcourse}
];

const router = new VueRouter({
    routes
});

Vue.use(VueRouter);
//创建和挂在根式实例
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

效果展示

三、App.vue文件（展示菜单【跳转界面方式】）

<!--一个组件由三部分组成-->
<template>
    <!--页面的结构-->
    <div class="app">
        <ul>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/course">文章</router-link></li>
            <li><router-link to="/maked">编辑</router-link></li>
        </ul>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    </div>
</template>

<script>
    // 页面的业务逻辑
    // 1\先引入子组件

    export default {
        name: 'App',  // 修改为文件名
        data() {
            return {

            }
        },
        methods: {},
        computed: {},
        components: {
            // 挂在子组件

        }
    }
</script>

<style>

</style>