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的核心深度集成 ...
随机推荐
- Elasticsearch和HDFS 容错机制 备忘
1.Elasticsearch 横向扩容以及容错机制http://www.bubuko.com/infodetail-2499254.html 2.HDFS容错机制详解https://www.cnbl ...
- 【bzoj4976】宝石镶嵌
题解: 比较水 注意k<=100这个条件 当n-k比较大的时候 我们显然会把它有的位都给取了 不然的话我们可以考虑dp 暴力状压就可以了 代码: #include <bits/stdc++ ...
- Codeforces 1009G Allowed Letters FMT,二分图,二分图匹配,霍尔定理
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1009G.html 题目传送门 - CF1009G 题意 给定一个长度为 $n$ 的字符串 $s$ .并给定 ...
- POJ3076 Sudoku 舞蹈链 DLX
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目(传送门) 题意概括 给出一个残缺的16*16数独,求解. 题解 DLX + 矩阵构建 (两个传送门) 学完这个之后,再 ...
- 关于用舞蹈链DLX算法求解数独的解析
欢迎访问——该文出处-博客园-zhouzhendong 去博客园看该文章--传送门 描述 在做DLX算法题中,经常会做到数独类型的题目,那么,如何求解数独类型的题目?其实,学了数独的构建方法,那么DL ...
- sql 分隔字符串函数
USE [tms]GO/****** Object: UserDefinedFunction [dbo].[fn_ConvertListToTable_Sort] Script Date: 2017/ ...
- springmvc+ajax——第三讲（post请求）
在ajax01.html中增加个input标签: 在ajax的js中增加: 在controller中仍然使用getParamter():
- Java中的不同遍历方式
已知一个Person类: public class Person implements Comparable<Person>{ String name; String id; public ...
- HDU 5113
HDU 5113类似四色定理的什么东西,大体就是dfs了,不过有两个坑点,这个题的逼格瞬间就上去了1.剪枝很神奇,任何一种颜色都不能超过剩下总格子数的一半,想想确实显然但是比赛的时候没有想到:2.测评 ...
- Spring AOP 切面编程实战Demo项目
为什么会有此项目?在某日,我看博客时,看到了讲面向切面编程的内容,之前也知道spring是面向切面编程的,只是自己没有写过相关的代码,于是决定自己写一个test.但是url拦截器从外部看,和AOP有相 ...