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的核心深度集成 ...
随机推荐
- error: Unable to find vcvarsall.bat
http://www.crifan.com/python_mmseg_error_unable_to_find_vcvarsall_bat/ [已解决]安装Python模块mmseg出错:error: ...
- 【Android】Android 监听apk安装替换卸载广播
[Android]Android 监听apk安装替换卸载广播 首先是要获取应用的安装状态,通过广播的形式 以下是和应用程序相关的Broadcast Action ACTION_PACKAGE_ADDE ...
- cmake与autoconf+automake
cmake与autoconf+automakes是同类的编译工具,本人常用的是cmake. 这有一篇对比的文章,记录一下. cmake与autoconf+automake的对比
- seafile+glusterfs 安装部署
今天在虚拟机上搭一下seafile,用于测试环境.此处安装的是社区免费版本的,可以使用一键自动安装(MySQL适用). 官方文档:https://manual-cn.seafile.com/ 1.一键 ...
- jenkins(5): jenkins邮件报警配置
参考: https://blog.csdn.net/u013066244/article/details/78665075 1. 使用 增强版的邮件通知 1.1 安装插件 1.2. 系统配置 ...
- Codeforces 980E The Number Games 贪心 倍增表
原文链接https://www.cnblogs.com/zhouzhendong/p/9074226.html 题目传送门 - Codeforces 980E 题意 $\rm Codeforces$ ...
- 删除Docker中所有已停止的容器
方法一: #显示所有的容器,过滤出Exited状态的容器,取出这些容器的ID, sudo docker ps -a|grep Exited|awk '{print $1}' #查询所有的容器,过滤出E ...
- 2013年蓝桥杯省赛C/C++A组真题解析
1.高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的 ...
- bind注意事项（传引用参数的时候）
默认情况下,bind的那些不是占位符的参数被拷贝到bind返回的可调用对象中. 当需要把对象传到bind中的参数中时,需要使用ref或者cref. 例如: #include<iostream&g ...
- es 模块的基础知识，深度了解
// 一模块的基础知识 /** * export :用于模块输出的出口 * import :文件引入的入口 */ // 1,第一种方式使用export方式输出 var a = 'a'; var b = ...