vue路由教程之静态路由


Posted in Javascript onSeptember 03, 2019

前言

vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

首先在html中,引入vue-router.js和vue.js,用router-link触发路由跳转,router-link可以像a标签一样使用和定义样式

router-view区域是路由匹配到的组件渲染的地方

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 
<div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>

然后是js代码

首先定义路由组件,组件可以是简单的组件(template简单定义即可),也可是extend定义的复杂组件

接下来定义路由映射表,就是定义路径和组件之间的映射 

然后使用路由映射表创建路由对象 

最后使用路由对象创建vue对象,并挂载到指定元素

// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)
 
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写)相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router// (缩写)相当于 router: router
1
}).$mount('#app') // 现在,应用已经启动了!

上例中,路由映射表实例名为routes,在创建路由对象时可以缩写,如果不叫routes,比如叫routesa,则创建路由对象时必须写routes:routesa

创建vue对象时,路由对象名也一样,如果不叫router,也不能缩写

使用extend创建模板

var todoItem = Vue.extend({
  data: function() {
   return {
    todoData: [
     { id: 0, text: '蔬菜' },
     { id: 1, text: '奶酪' },
     { id: 2, text: '随便其它什么人吃的东西' }
    ]
   };
  },
  template: `
  <ul>
   <li v-for='(d, i) in todoData' :key="i">
    {{ d.text }}
   </li>
  </ul>
 `,
 
 });
 
 
 Home = { template: '<div>foo</div>' }
 About = { template: '<div>bar</div>' }
 
 routes = [
  { path: '/home', component: Home },
  { path: '/about', component: todoItem }
 ]
 
 router = new VueRouter({
  routes:routes // (缩写)相当于 routes: routes
 });
 
 app = new Vue({
  router:router
 }).$mount('#app');

还可以这样写template

<!DOCTYPE html>
<!-- saved from url=(0077)https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home -->
<html>
 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>abc</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="./basic_01_files/custom.css" rel="external nofollow" >
</head>
 
<body>
 <div id="app">
  <div class="row">
   <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
     <h2>Router Basic - 01</h2>
    </div>
   </div>
  </div>
  <div class="row">
   <div class="col-xs-2 col-xs-offset-2">
    <div class="list-group">
      
     <router-link class="list-group-item" to="/home">Go to Foo</router-link>
     <router-link class="list-group-item" to="/about">Go to Bar</router-link>
    </div>
   </div>
   <router-view></router-view>
  </div>
 </div>
 <template id="home">
  <div>
   <h1>Home</h1>
   <p>{{msg}}</p>
  </div>
 </template>
 
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
 <script>
  
 var todoItem = Vue.extend({
  data: function() {
   return {
    todoData: [
     { id: 0, text: '蔬菜' },
     { id: 1, text: '奶酪' },
     { id: 2, text: '随便其它什么人吃的东西' }
    ]
   };
  },
  template: `
  <ul>
   <li v-for='(d, i) in todoData' :key="i">
    {{ d.text }}
   </li>
  </ul>
 `,
 
 });
 
 var t_test = Vue.extend({
  data:function(){
   return {
    msg:"hello,test"
   };
  },
  template:"#home"
 
  }
 
 );
 
 
 
 // Home = { template: '<div>foo</div>' }
 // About = { template: '<div>bar</div>' }
 
 routes = [
  { path: '/home', component: t_test },
  { path: '/about', component: todoItem }
 ]
 
 router = new VueRouter({
  routes: routes // (缩写)相当于 routes: routes
 });
 
 app = new Vue({
  router: router
 }).$mount('#app');
 </script>
</body>
 
</html>

如果不需要固定的导航链接,可以把router-link放在模板里面:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>abc</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
 
<body>
 <div id="app">
  <h1>Hello App!</h1>
   
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view>
   
  </router-view>
 </div>
</body>
<script type="text/javascript">
// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)
 
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<router-link to="/bar">Go to Bar</router-link>' }
const Bar = { template: '<router-link to="/foo">Go to Foo</router-link>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写)相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router // (缩写)相当于 router: router
 
}).$mount('#app') // 现在,应用已经启动了!
</script>
 
</html>

进去的时候打网址

xxx/xx.html#/foo 或 xxx/xx.html#/bar

就可以实现foo和bar模板之间互相跳转

也可以设置默认路由:

const routes = [
 { path: '/', component: Bar },
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar },
 
]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
多个vue子路由文件自动化合并的方法
Sep 03 #Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 #Javascript
vue 自动化路由实现代码
Sep 03 #Javascript
vue中npm包全局安装和局部安装过程
Sep 03 #Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 #Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 #Javascript
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
关于运动会的稿件
2014/02/02 职场文书
开学寄语大全
2014/04/08 职场文书
python实现剪贴板的操作
2021/07/01 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
vue实现简易音乐播放器
2022/08/14 Vue.js