Vue_(Router路由)-vue-router路由的基本用法
2023-09-14 08:57:05 时间
vue-router官网:传送门
vue-router起步:传送门
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用
单页应用:Single Page Application简称SPA,只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容
简单的来说,根据不同的url与数据,将他们都显示在同一个页面中,就可以称为是单页应用
而控制页面跳转需要用路由
vue-router下载:下载js,或使用npm install vue-router -S
vue-router使用:
定义组件
配置路由
创建路由对象
注入路由
Learn
一、-vue-router路由的基本用法
目录结构
【每个demo下方都存有html源码】
一、-vue-router路由的基本用法
使用 router-link 组件来导航、通过传入 `to` 属性指定链接、<router-link> 默认会被渲染成一个 `<a>` 标签
<body> <div id = "GaryId"> <!--router-link默认被渲染成一个a标签--> <router-link to="/home">首页</router-link> <router-link to="/foods">美食</router-link> <div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> </body>
分四步使用vue-router
<script> //1 定义组件 let Home = { template : "<h2>首页</h2>" } let Foods = { template : "<h2>美食</h2>" } //2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods } ] // 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes }); new Vue({ //4 注入路由 简写 router : myRouter }).$mount("#GaryId") </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> </head> <body> <div id = "GaryId"> <!--router-link默认被渲染成一个a标签--> <router-link to="/home">首页</router-link> <router-link to="/foods">美食</router-link> <div> <!--将数据显示在这里--> <router-view></router-view> </div> </div> </body> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript" src="../js/vue-router.js" ></script> <script> //1 定义组件 let Home = { template : "<h2>首页</h2>" } let Foods = { template : "<h2>美食</h2>" } //2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods } ] // 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes }); new Vue({ //4 注入路由 简写 router : myRouter }).$mount("#GaryId") </script> </html>
相关文章
- vue浏览器缓存问题_vue兼容浏览器能兼容到几
- Vue之Router(一)
- VUE父子组件之间的传值,以及兄弟组件之间的传值;
- 10个关于 Vue 的高级开发技巧
- 解决:VUE同一路由强制刷新页面
- Java项目分享-基于 SpringBoot + Vue 的智能停车场管理平台
- Vue.js 学习笔记 - 路由(Router)
- Vue路由传参的两种方式
- 基于SSM+SpringBoot+Vue+ElmentUI实现公司案件管理系统
- Vue-slot插槽的所有使用方法
- vue-router 的基本使用
- vue 路由 按需 keep-alive
- vue嵌套路由子路由 path 注意
- Vue Ant Admin学习笔记,持续记录
- Vue使用插槽分发内容
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue如何连接Redis(vue怎么连接Redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue应用中部署Redis(vue中使用redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)