首页 > 编程 > JavaScript > 正文

vue路由教程之静态路由

2019-11-19 10:54:12
字体:
来源:转载
供稿:网友

前言

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: router1}).$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 }, ]

总结

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表