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 相关文章推荐
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
vuex存储token示例
Nov 11 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
You might like
php 操作符与控制结构
2012/03/07 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python交互式图形编程实例(一)
2017/11/17 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
快速了解Python开发环境Spyder
2020/06/29 Python
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
团代会开幕词
2015/01/28 职场文书
投标邀请书范本
2015/02/02 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers