vue-router基本概念及使用

index.html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script src="http://unpkg.com/vue/dist/vue.js"></script>
 7     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 </head>
 9 <body> 
10     <div id="box">
11         <p>
12            <!-- 使用 router-link 组件来导航. -->
13             <!-- 通过传入 `to` 属性指定链接. -->
14             <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
15         <router-link to="/home">home</router-link>
16         <router-link to="/news">news</router-link>
17       </p>
18           <!-- 路由出口 -->
19           <!-- 路由匹配到的组件将渲染在这里 -->
20           <router-view></router-view>
21     </div>
22 
23     <script type="text/javascript">
24         // 1. 定义(路由)组件。
25         const Home = { template: '<div>首页</div>' }
26         const News = { template: '<div>新闻</div>' }
27 
28         // 2. 定义路由
29         // 每个路由应该映射一个组件
30         const routes = [
31           { path: '/home', component: Home },
32           { path: '/news', component: News }
33         ]
34 
35         // 3. 创建 router 实例,然后传 `routes` 配置
36         const router = new VueRouter({
37           routes // (缩写)相当于 routes: routes
38         })
39 
40         // 4. 创建和挂载根实例。
41         // 记得要通过 router 配置参数注入路由,
42         // 从而让整个应用都有路由功能
43         const app = new Vue({
44           router
45         }).$mount('#box')
46 
47         // 现在,应用已经启动了!
48     </script>
49 </body>
50 </html>

路由重定向

上面代码,我们应该设置打开浏览器就默认调整到 “首页”,所以需要把根路由/重定向到/home。  修改路由配置:

 const routes = [
              { path: '/', redirect: '/home' },
             { path: '/home', component: Home },
             { path: '/news', component: News }
         ]

      1:建立路由组件

      2:建立映射

      3:建立路由实例

      4:使用router-link建立路由导航

      5:使用router-view建立路由出口

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 42:更新Unity2017快捷键清除日志

Hello,之前在零基础入门系列里,有发过关于快捷键清除日志的文章,但是当时的Unity版本是Unity5.5,很多人和我说用起来都还蛮方便,但是随着2017的...

502
来自专栏技术博客

Asp.Net MVC对类HtmlHelper的自定义扩展方法以及如何调用

c# 扩展方法出来已久,介绍扩展方法的文章也很多,此处就不多介绍,如有不懂当然可以百度,google一下,园子当中也有超级多的讲解。

691
来自专栏木子墨的前端日常

Vue-Router模式、钩子

上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧

812
来自专栏开源项目

Git 项目推荐 | javascript ajax 代理调用工具

javascript ajax 代理调用工具 。 AjaxProxy url: /template/default/script/AjaxProxy.js; 接...

2869
来自专栏草根专栏

使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下)

我想查看viewer下的repositories。注意里面的edges,一旦看到这个词,通常就表示有连接到某个数组的数据。在这里就是一个集合的repositor...

522
来自专栏PHP技术

哎呦不错哦!一组让人眼前一亮的404创意页面设计

原文出处: graphicdesignjunction 译文出处:优设网 WEARESPRY – 404 Error Page ? Cayenne –...

3214
来自专栏Java技术栈

@Controller,@Service,@Repository,@Component详解。

@Controller 用来表示一个web控制层bean,如SpringMvc中的控制器。 @Service 用来表示一个业务层bean。 @Repositor...

3095
来自专栏知无涯

XML创建或改变某个新属性

2528
来自专栏高性能服务器开发

+从零实现一款12306刷票软件1.3

12306的图片验证码一般由八个图片组成,像上面的“龙舟”文字,也是图片,这两处的图片(文字图片和验证码)都是在服务器上拼装后,发给客户端的,12306服务器上...

811
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第十一天 JSP学习

JSP全名是Java Server Pages,它是建立在Servlet规范之上的动态网页开发技术。在JSP文件中,HTML代码与Java代码共同存在,其中,H...

943

扫码关注云+社区