vue简单路由（一）

来源：互联网发布：多个表格数据汇总公式编辑：程序博客网时间：2024/06/16 02:36

在项目中，将vue的单页面应用程序改为了多页面应用程序，因此在某些场景下，需要频繁的切换两个页面，因此考虑使用路由，这样会减少服务器请求。

使用vue-cli（vue脚手架）快速搭建一个项目的模板（webpack-simple）,运行起来后，将原来index.html页面挂载点中的内容删除

index.html

<div id="app"><!-- 使用 router-link 组件来导航,通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/home"> <button>home</button></router-link><router-link to="/game">   <button>game</button></router-link><!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>

router-link会被默认渲染成一个a标签，如下图

main.js，定义路由时，将每个路由映射到组件，路由其实也就是引入组件

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//引入两个组件import home from "./home.vue"import game from "./game.vue"//定义路由，将每个路由映射到组件const routes = [   { path: "/home", component: home},   { path: "/game", component: game},]//创建路由实例const router = new VueRouter({routes})new Vue({   el: '#app',   data: {   },   methods: {   },   router})

home.vue

<template><h3>首页</h3></template>

game.vue

<template><h3>游戏</h3></template>

点击 home 或者 game 按钮时，就会显示相应的内容，如下图：

0 0