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 相关文章推荐
文件编码导致jquery失效的解决方法
Jun 26 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP时间类完整代码实例
2021/02/26 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
pyqt5实现登录界面的模板
2020/05/30 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
什么是规则表达式
2012/05/03 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
如何写好自荐信
2014/04/07 职场文书
论文评语大全
2014/04/29 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
弄虚作假心得体会
2014/09/10 职场文书
教师听课学习心得体会
2016/01/15 职场文书
《风筝》教学反思
2016/02/23 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python