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
- vue简单路由(一)
- vue简单路由(一)
- vue.js路由vue-router(一)——简单路由基础
- vue-router路由(一)
- (一) Vue 路由+子路由
- vue 路由简单实例
- vue初探--路由简单使用
- Vue-Router(一) 嵌套路由
- vue路由(转载)
- vue路由(带参传值)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- Vue初体验(一),最简单的Vue示例
- Vue--router--->>>一个简单的路由
- 初识druid
- 查看表所有的触发器
- active消息通知设计思路及示例
- Python numpy 常用函数总结
- mybais的0值漏洞
- vue简单路由(一)
- <a> 标签的href onclick可以同时触发
- 《ES6入门》读书笔记之let和const命令
- Exception用了throws 就不要用catch
- Fragment详解之二——基本使用方法
- 树形结构sql的进一步理解
- palindrome-partitioning
- 【纸飞机(PaperPlane)IMITATE版】知识点整理
- java.lang.AbstractMethodError: org.slf4j.impl.Log4jLoggerAdapter.log