路由

路由基本使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>路由基本使用</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script><style>.myactive{color:red;font-weight: 800;font-style: italic;font-size: 40px;text-decoration: underline;background-color: green;}.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}.v-enter-active,.v-leave-active{transition: all 0.5s ease;}</style></head><body><div id="app"><!--<a href="#/login">登录</a><a href="#/register">注册</a>--><!--router-link默认渲染了一个a标签，可以用tag设置渲染的标签--><router-link to="/login" tag="span">登录</router-link><router-link to="/register">注册</router-link><!--这是vue-router提供的元素， 专门用来做占位符的--><transition mode="out-in"><router-view></router-view></transition></div><script>var login = {template:"<h1>登录组件</h1>"}var register = {template:"<h1>注册组件</h1>"}//创建一个路由对象，当导入vue-router包之后，在window全局对象中有了一个构造函数，叫做VueRouter//在new路由对象的时候，可以为构造函数传递一个配置对象var routerobj = new VueRouter({routes:[//表示路由匹配规则//每个路由规则都是一个对象，这个规则对象都有两个必须的属性//属性1是path，表示监听哪个路由链接地址//属性2是component，表示如果 路由是前面匹配到的path，表示展示component属性对应的组件//注意：component属性值必须是一个组件模板对象，不能是组件的引用名称//{path : '/', component : login},{path : '/', redirect : '/login'},//重定向{path : '/login', component : login},{path : '/register', component : register}] ,linkActiveClass:'myactive'});var vm = new Vue({el:"#app",data:{},methods:{},router:routerobj//将路由规则对象注册到vm实例上，用来监听url地址})</script></body>
</html>

路由规则中定义参数

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>路由规则中定义参数</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script></head><body><div id="app"><router-link to="/login?id=10&name=张三" tag="span">登录</router-link><router-link to="/register/12/李四">注册</router-link><router-view></router-view></div><script>var login = {template:"<h1>登录组件 --- {{ $route.query.id }}{{ $route.query.name }}</h1>",created(){//组件生命周期钩子console.log(this.$route.query.name);}}var register = {template:"<h1>注册组件</h1>",created(){console.log(this.$route.params.id);console.log(this.$route.params.name);}}var routerobj = new VueRouter({routes:[{path : '/', redirect : '/login'},//重定向{path : '/login', component : login},{path : '/register/:id/:name', component : register}]});var vm = new Vue({el:"#app",data:{},methods:{},router:routerobj})</script></body>
</html>

路由嵌套

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>路由嵌套</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script></head><body><div id="app"><router-link to="/account">account</router-link><router-view></router-view></div><template id="tmpl"><div><h1>这是account组件</h1><router-link to="/account/login">登录</router-link><router-link to="/account/register">注册</router-link><router-view></router-view></div></template><script>var account = {template:"#tmpl"}var login = {template:"<h3>登录</h3>"}var register = {template:"<h3>注册</h3>"}var router = new VueRouter({routes:[{path : '/account', component : account, children:[{path : 'login', component : login},{path : 'register', component : register}]}
//                  {path : '/account/login', component : login},
//                  {path : '/account/register', component : register}]});var vm = new Vue({el:"#app",data:{},methods:{},router:router})</script></body>
</html>

命名视图实现经典布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>命名视图实现经典布局</title><script src="../../../thirdlib/vue/vue.js"></script><script src="../../../thirdlib/vue/vue-router.min.js"></script><style>html, body, h1{margin: 0;padding: 0;font-size: 20px;}.header{height: 80px;background-color: orange;}.container{display: flex;height: 600px;}.left{background-color: lightblue;flex: :2;}.main{background-color: lightcoral;flex: 8;}</style></head><body><div id="app"><router-view></router-view><div class="container"><router-view name="left"></router-view><router-view name="main"></router-view></div></div><script>var header = {template:'<h1 class="header">header头部区域</h1>'}var left = {template:"<h1 class='left'>left区域</h1>"}var main = {template:"<h1 class='main'>main主体区</h1>"}var router = new VueRouter({routes:[{path : '/', components : {default:header,left : left,main:main}}/*{path : '/header', component : header}{path : '/left', component : left},{path : '/main', component : main}*/]});var vm = new Vue({el:"#app",data:{},methods:{},router:router})</script></body>
</html>

VUE—从入门到飞起（五）相关推荐

VUE—从入门到飞起（四）
目录组件组件创建方式组件中的data和methods 组件切换方式父组件向子组件传值父组件把方法传递给子组件案例:评论添加及列表显示 ref获取dom和组件 VUE-从入门到飞起(一) V ...
VUE—从入门到飞起（三）
目录动画显示隐藏(不使用动画) 使用过渡类名使用第三方类animate.css实现动画使用钩子函数模拟小球半场动画列表动画 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从 ...
VUE—从入门到飞起（二）
目录过滤器filter vue-resource发送http请求 axios发送http请求 VUE生命周期 VUE生命周期钩子函数自定义指令 watch computed VUE-从入门到飞起( ...
VUE—从入门到飞起（一）
目录基础起步插值表达式{{}}.v-cloak.v-text.v-html.v-bind.v-on 学了这么多了,写一个跑马灯效果巩固一下吧事件修饰符(打开浏览器f12调试哦) v-model ...
vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录第 ...
Spring Boot Vue Element入门实战（五）封装axios
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
vue从入门到放弃（五）
----------------------------------------------------点击这里<专栏目录>查看更多---------------------------- ...
weblogic从入门到飞起（部署应用、日志）（六）
目录 server日志位置部署应用程序的过程自动部署(只能应用于开发模式)(只能发布到管理服务器): 控制台部署: 命令行部署: 还可以用wstl: weblogic从入门到起飞!(weblogi ...

VUE—从入门到飞起（五）

路由

路由基本使用

路由规则中定义参数

路由嵌套

命名视图实现经典布局

VUE—从入门到飞起（五）相关推荐

最新文章

热门文章