(尚039) Vue_router路由模式
2023-09-11 14:14:08 时间
说明:
1) 官方提供的用来实现 SPA 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save
==================================================
1.路由器与路由的概念区别?
路由器不是路由,是两种不同的概念;
路由器管理路由;
2.什么是路由?(后台路由和前台路由)
1).路由是键值对,是一种映射关系;(k-v)
2).k是path,value是?
后台路由的 value是处理请求的回调函数;
前台路由是组件
3.相关API说明
1) VueRouter(): 用于创建路由器的构建函数
new VueRouter({
// 多个配置项
})
说明:创建一个路由器出来;路由器创建的时候传的是配置对象
2) 路由配置
routes: [//routes复数说明是多个路由;值是数组类型;路由无先后顺序;
{ // 一般路由
path: '/about',
component: About
},
{ // 自动跳转路由
path: '/',
redirect: '/about'
}
]
3) 注册路由器
import router from './router'
new Vue({
router
})
4) 使用路由组件标签
1. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
<router-view></router-view>
相关文章
- (尚043) vue_向路由组件传递数据+vue param和query两种传参方式
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue - 路由传递参数
- vue - src for components || router(index.js)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- vue框架
- vue-cli3项目关闭烦人的代码检测
- Vue - 实现锚点跳转定位到指定页面位置功能 / Anchor 页面添加锚点(仅需一个函数代码超级简洁)
- Vue项目--尚品汇(开发流程、组件拆分,路由跳转)
- 【前端】vue Failed to resolve component If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
- vue路由懒加载
- vscode----vue模板--用户代码片段--快捷
- vue.js格式使用vant-页面引入2
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue router 的两种路由模式hash与history的区别
- vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
- vue router路由懒加载
- vue router命名路由与视图
- vue中async和await异步编程
- vue项目中集成腾讯TIM即时通讯
- vue嵌套路由总结
- Vue路由scrollBehavior滚动行为控制锚点
- Vue实战第2章:简单的分配页面布局
- vue v-if 不显示和显示错位问题
- Vue中文本渲染三种方法 {{}}、v-html、v-text的区别
- vue 挂载点 实例 模板
- 造个自己的Vue的UI组件库类似Element