Vue（十六）vue-router路由
一、 vue-router路由
<style>
.active{
font-size:20px;
color:red;
text-decoration: none;
}
</style> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script>
window.onload = function(){
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
} var News = {
template:'<h3>我是新闻</h3>'
} //2.配置路由
const routes = [
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //重定向
] //3.创建路由实例
const router = new VueRouter({
mode:'history', //更改模式
routes, //简写，相当于routes:routes
linkActiveClass:'active'
}) //4.创建根实例并将路由挂载到Vue实例上
var vm = new Vue({
el:'#app',
router //注入路由
})
}
</script> </head> <body> <div id="app"> <div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div> </body>
<style>
.active{
font-size:20px;
color:red;
text-decoration: none;
}
</style> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script>
window.onload = function(){
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
} var User = {
template:'#user'
} var Login={
template:'<h4>用户登陆。。。获取参数：{{$route.query.pwd}}</h4>'
} var Regist={
template:'<h4>用户注册。。。获取参数：{{$route.params}}</h4>'
} const routes = [
{
path:'/home',
component:Home
},
{
path:'/user',
component:User,
children:[
{
path:'login',
component:Login
},
{
path:'regist/:username/:password',
component:Regist,
}
]
},
{
path:'*',
redirect:'/home'
}
] const router = new VueRouter({
routes,
linkActiveClass:'active' //更新活动链接的class类名
}) var vm = new Vue({
el:'#app',
router //注入路由
})
}
</script> </head> <body> <div id="app"> <div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> </div> <template id="user">
<div>
<h3>用户信息</h3>
<ul>
<router-link to="/user/login?name=Tom&pwd=123" tag="li">用户登录</router-link>
<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
</ul>
<router-view></router-view>
</div>
</template> </body>
new Vue({
el:'#itany',
router, //注入路由
methods:{
push(){
router.push({path:'home'}); //添加路由，切换路由
},
replace(){
router.replace({path:'user'}); //替换路由，没有历史记录
}
}
});
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<router-view></router-view>
</transition>
</div>
Vue（十六）vue-router路由的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- hbuilderX创建vue项目之添加router路由（前端萌新）
作为一个刚刚接触前端不久的新人来说,熟悉了一种目录结构或者项目创建方法以后,恨不得一辈子不会变! 可是人要生活,就要工作,既然是打工,当然要满足雇佣者的要求. 今天我来说说 hbuilderX 这个开 ...
- Vue(基础六)_嵌套路由（续）
一.前言 1.路由嵌套里面的公共路由 2.keep-alive路由缓存 3.导航守卫 二.主要内容 ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
随机推荐
- lua 日期的一些函数
--根据日期获取星期几 function getWeekNum(strDate) local ymd = Split(strDate,"-") t = ]),month=]),da ...
- [转] JavaScript 之 ArrayBuffer
JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来 ...
- [POI2007]堆积木Klo
题解: dp定义方程的时候 好像也不能都用前一个来递推..这样就不能优化了 这题看了题解才想出来... 还是很简单的啊.... 我们定义f[i]表示前i个最大收益 那么j要能从i转移就得满足a[i]- ...
- Python_ collections_defaultdict默认字典
defaultdict(): 默认类型为字典,继承了字典的方法 import collections dic = collections.defaultdict() dic['k1'] = 'hell ...
- POJ3321Apple Tree Dfs序 树状数组
出自——博客园-zhouzhendong ~去博客园看该题解~ 题目 POJ3321 Apple Tree 题意概括 有一颗01树,以结点1为树根,一开始所有的结点权值都是1,有两种操作: 1.改变其 ...
- DateFormat抽象类实现日期与字符串的转换
[需求]日期是可以计算的,而日期字符串无法计算. 由于DateFormat是抽象类,我们一般都是用的它的子类SimpleDateFormat. [SimpleDateFormat构造方法] 1)Sim ...
- web项目部署以及放到ROOT目录下
最近度过了一个国庆长假,好几天都没有写博客了! 发布这篇案例也是希望能帮助到像我一样的菜鸟o(*￣︶￣*)o,百度上面的资料都不怎么全.也没有人说明注意事项.总是这篇说一点.那个人也说补一点,最后自己 ...
- Spring Boot Starters 列表
Spring Boot application starters 名称 描述 Pom spring-boot-starter 核心starter,包括自动配置支持,日志和YAML Pom spring ...
- Java常用API——时间类
前言:Java.util.*工具包中,包含了集合框架,旧集合类,事件模型,日期和时间设施,国际化和其他使用程序类 (字符串.随机数生成器和位数组) 一.日期类Date 1.概述 Date是一个薄包装类 ...
- css3流动布局
-webkit-box-ordinal-group: 2;1...布局优先显示 display: -webkit-box;盒子 -webkit-box-orient:horizontal;显示方式 - ...