(尚040) vue_基本路由
左侧两个基本路由连接,右侧是路由组件显示部分;头部是固定的
注意:
现在流行SPA应用(单页应用:就有一个真实页面);
关键是承载的功能页面有很多,但是涉及到页面本身有很多变化,但是不能跳转;
这就引出路由连接,点击路有链接,不会向后台发送请求(如果发送请求,页面就跳转了);
只是更新显示不同的路由组件,但是路由组件内部会向后台发送ajax请求,可能动态获取数据
=====================================================================
实际项目中组件分为两大类:路由组件和非路由组件
非路由组件:components下面
路由组件:两种名字比较常见:views/pages
=====================================================================
当前有两个路由组件:about和home
1.先创建两个组件
2.把路由组件映射成路由:(由路由器映射成路由:)
2.1).创建路由器(需要专门定义一个模块,故专门定义一个文件夹router)
在router文件夹下新建index.js文件
2.2)路由组件配置好了,路由配置好了,接下来配置路由器
在入口js(main.js)中创建vue时配置
3.编写页面
App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Router Test</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--生成路由链接-->
<!--to="/about" 跟路由器后面的配置要一致-->
<router-link to="/about" class="list-group-item">About</router-link>
<router-link to="/home" class="list-group-item">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--显示当前组件-->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
============================================================================================================
最终页面展示显示不出来右边组件的内容:
错误原因:路径写错了
页面正常显示:
===========================================================================================================
总结: 编写使用路由的 3 步
相关文章
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- vue 路由进度条 nprogress
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- vue 监听路由变化
- Vue - 判断页面返回上一页时是否可返回,如不可返回则跳转到首页或其他页(路由 $router.back(-1) 回退时如何判断有没有上一个路由)如果有历史记录则返回上一页,反之跳转到首页
- Vue - route 路由中配置 404 页面
- Vue项目--路由跳转的分析
- Vue.js路由管理器 Vue Router
- VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)
- 单页vue路由router
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法
- Django REST framework+Vue 打造生鲜超市(一)
- 使用Vue3学习Vue的基础知识
- Vue路由跳转后 Index.html中引入的JS文件失效 问题解决
- vue v-if 不显示和显示错位问题