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的核心深度集成 ...
随机推荐
- ASP.NET Core Cookie-based认证实现
using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; namespace HelloCore2.Contr ...
- jquery自定义事件
触发事件: $(document).trigger('REMOVE_WEBSITE_MSG'); 判断消息条数为0,触发这个
- springboot中使用拦截器、监听器、过滤器
拦截器.过滤器.监听器在web项目中很常见,这里对springboot中怎么去使用做一个总结. 1. 拦截器(Interceptor) 我们需要对一个类实现HandlerInterceptor接 ...
- centos7 yum install redis
直接yum 安装的redis 不是最新版本 yum install redis 如果要安装最新的redis,需要安装Remi的软件源,官网地址:http://rpms.famillecollet.co ...
- MySQL基础一（CMD使用）
概述 MySQL因可移植行高,安装简单小巧等优点被更多的开发者喜爱.执行MySQL的指令的方式有2种方式,方式一.MySQL的客户端软件比如navicat :方式二.通过Cmd命令: CMD命令执行方 ...
- jxoi2017
题解: 并不知道题目顺序就按照难度排序了 [JXOI2017]加法 这是一道很简单的贪心 最小值最大二分答案 然后我们可以从左向右考虑每一个位置 如果他还需要+A 我们就从能覆盖它的区间中挑一个最右的 ...
- MVC和Web API 过滤器Filter
MVC和Web API Filter(过滤器) ASP.NET MVC 支持以下类型的操作筛选器: · 授权筛选器.这些筛选器用于实现IAuthorizationFilter和做出关于是 ...
- web请求过程-学习使人快乐1
智齿离开我10个小时了,现在除了书啥都不能啃········呜呜呜~ ~~~~~~~~~~~~~~~~~~~想滑滑梯~~~~~~~~~~~~~~~~~~~ 网络请求过程 web请求大多使用B/ ...
- StringBuffer 可变参数拼接
@RequestMapping(value="/getFundsCount",method=RequestMethod.POST) public Result getFundsCo ...
- ActiveMQ在windows下启动失败解决方案
activemq.xml文件中的 <transportConnectors> <!-- DOS protection, limit concurrent connections to ...