首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 },
 
]

总结

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

vue路由教程之静态路由

- Author -

手指乐

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
开启BootStrap学习之旅
May 04 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue组件实现进度条效果
Jun 06 Javascript
多个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
maven(2) Navicat(1) harbor(1) V Rising(1) Tablespace(1) procedure(1) GoFrame(3) 内置函数(1) 自定义函数(1) commit(1)
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
MySQL中create table语句的基本语法是
2007/01/15 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python导入时小括号大作用
2017/01/10 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
详解Python学习之安装pandas
2019/04/16 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python中pow函数用法及功能说明
2020/12/04 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
安全生产责任书
2014/03/12 职场文书
班组长安全工作职责
2014/07/15 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
钱学森电影观后感
2015/06/04 职场文书
总经理年会致辞
2015/07/29 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书