vue2.0路由-适合刚接触新手简单理解
路由 简单 理解 适合 新手 Vue2.0 接触
2023-09-27 14:19:41 时间
vue路由:vue-router
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
下载方式:npm install vue-router
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue路由</title> <script src="vue.min.js"></script> <script src="vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> <router-link to='/about'>关于</router-link> </div> <div> <router-view></router-view> </div> </div> </body> </html>
JavaScript:
<script> //组件 const Home = { template:'<h3>我是主页</h3>' }; const News = { template:'<h3>我是新闻</h3>' } const About = { template:'<h3>我是关于</h3>' } //配置路由 const routes = [ {path:'/home', component :Home}, {path:'/news', component:News}, {path:'/about',component:About}, //重定向 {path:'*',redirect:'/home'} ] //生成路由实例 const router = new VueRouter({ routes }) //挂载到vue上 new Vue({ router, el:'#box' }) </script>
CSS:
<style> .router-link-active{ background: #ccc; padding: 5px; text-decoration: none; } </style>
总体:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue路由</title> <script src="vue.min.js"></script> <script src="vue-router.min.js"></script> <style> .router-link-active{ background: #ccc; padding: 5px; text-decoration: none; } </style> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> <router-link to='/about'>关于</router-link> </div> <div> <router-view></router-view> </div> </div> <script> //组件 const Home = { template:'<h3>我是主页</h3>' }; const News = { template:'<h3>我是新闻</h3>' } const About = { template:'<h3>我是关于</h3>' } //配置路由 const routes = [ {path:'/home', component :Home}, {path:'/news', component:News}, {path:'/about',component:About}, //重定向 {path:'*',redirect:'/home'} ] //生成路由实例 const router = new VueRouter({ routes }) //挂载到vue上 new Vue({ router, el:'#box' }) </script> </body> </html>
相关文章
- ROS根据访问不同的网址,走不同的路由策略的脚本
- centos增加静态路由
- 【硬创邦】跟hoowa学做智能路由(二):从芯片开始
- 基本路由
- 路由控制概述
- 匿名洋葱路由Tor,又添了一层新加密算法
- 路由信号能不能穿墙,要看这两个东西
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
- ES学习之分片路由
- rails路由
- React | React Router 路由切换原理
- 前端路由简介以及vue-router实现原理
- react创建项目学习基础语法react路由的简单应用(五)
- NewH3C—IP路由原理(静态路由)
- 场景类:vue多个router-view路由嵌套
- vue系列:当vue路由配置history模式页面加载不出来的bug
- 【Android 组件化】路由组件 ( 路由组件结构 )
- 路由扩张器
- 触摸汇编,其实只要有一直在学习,在路由,这种感觉就很好
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- RN路由-React Navigation组件5.x-基本原理(中文文档)
- react-router v4 路由规则解析
- vue路由钩子拦截器beforeEach和afterEach及页面路由变化路由监听