Vue路由的使用（页面跳转）

路由不是内部功能所以需要先安装：

一定要安装到相关项目中哦

　　cnpm install --save vue-router

 

需创建的文件夹及文件：

　　　　　　　　　　　　　　　　　　　　

 

 

 index.js 

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView'
import AboutView from '../views/AboutView'

// 配置信息中需要页面的相关配置
const routes = [
    {
        path:"/",    // 这里配置页面访问路径，当访问 / 时就是访问
        component : HomeView
    },
    {
        path:"/about",   //这里配置页面访问路径，当访问 /about 时就是访问AboutView.vue页面
        component : AboutView
    }
]
// 路由对象
const router = createRouter({
    /**
     * createWebHashHistory：
     *          在进行访问时 路径是localhost:80/#/xxx
     *  原理：a标签的锚点链接
     * 
     * createWebHistory：
     *          在进行访问的时候 路径是localhost:80/xxx -- 没有#了
     *      这种方式需要后台进行重定向操作，否则会出现404
     *  原理：H5的pushState()
     *  */ 
    history:createWebHashHistory(),    // 访问方式
    routes
})

export default router;

在main.js中引入

AboutView.vue

　　　　　　　　　　　　　　　　

 

 

 HomeView.vue

　　　　　　　　　　　　　　　　

 

 

 App.vue

<template>
  <!-- 路由的显示入口 -->
  <router-view></router-view>
  <!-- 路由的跳转 -->
  <router-link to="/">首页</router-link> | 
  <router-link to="/about">about</router-link>
</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>

查看效果：

 

 

 

 成功实现路由的跳转