vue路由

进阶Vue.js第三讲 21, 组件中的data和methods 22, vue-resource发起get,post,jsonp请求 23, Vue定制私有过滤器 24, vue全局过滤器的基本使用 25, 父组件把方法传递给子组件 26, 组件案例-评论列表 27, ref获取DOM元素和组件 28, 路由的基本使用 29, 路由规则中定义参数 30, 路由规则传参方式2 21, 组件中的data和methods < div id = " app " > < test > </ test > </ div > < script > // 组件可以有自己的data数据，组件的data和实例的data不一样，实例中的data可以是一个对象 //但是组件中的data必须是一个方法 //组件中的data除了必须为一个对象之外，这个方法内部还必须返回一个对象才行。 //组件中的data数据，使用方式，和实例中的使用方式完全一样 Vue . component ( "test" , { template : "<h2>这是个组件---{{msg}}</h2>" , data : function ( ) { return { msg : "这是组件的data" } } } ) var app = new Vue ( { el : "#app" } ) ; </ script > 22,

前言 动态路由加载和动态菜单渲染的应用在后端权限控制中十分常见，后端只要加载权限路由进行渲染返回到浏览器就可以。在前后端分离中，权限控制动态路由和动态菜单也是一个非常常见的问题。其实我们最最理想的效果是什么呢？ 我们访问一个应用，在登录之前有哪些路由是一定要加载的呢？你看我总结如下，你看下是不是这些： 1.登录路由 （登录功能路由） 2.系统路由（系统消息路由，比如欢迎界面，404，error等的路由） 但是在vue中，一旦实例化，就必须初始化路由，但这个时候你还没有登录，没有获取你的权限路由呀，如果加载全部路由，那么在浏览器上输入路由你就可以访问（这个问题可以使用router.beforeEach钩子进行权限鉴定解决），那么在前后端分离的开发项目中，vue是如何实现动态路由加载实现权限控制的呢？这就是我们这篇文章要写的内容。 我们写过后台渲染都知道怎么去实现，那么放到vue中如何去实现呢？我们先罗列几个问题进行思考，如下 1.vue中路由是如何初始化，放入到vue实例中的？ 2.vue中提供了什么实现动态路由加载呢？ 我们先顺着这两个问题进行思考，并且顺着这两个问题，我们进行对应方案解决，这个过程中会会出现很多新的问题，我们也针对新问题出对应方案，并且进行优化。 路由初始化 路由初始化发生在什么时候呢？我们可以看主入口文件main.js，下面是我贴出的我的一个项目案例：

vue路由跳转四种方式以及区别 router-link 1.不带参数 // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 < router - link : to = "{name:'home'}" > < router - link : to = "{path:'/home'}" > //name,path都行, 建议用name 2.带参数 // params传参数(类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id" // 配置path,刷新页面id会保留 -- 不配置path,第一次可请求,刷新页面id会消失 // html 取参:$route.params.id -- script取参: this.$route.params.id < router - link : to = "{name:'home', params: {id:1}}" target = _blank > // query传参数 (类似get,url后面会显示参数) 路由可不配置 // html取参:$route.query.id -- script取参:this.$route.query.id < router - link : to = "{name:'home', query: {id:1}