花瓣网设计网站百度官网认证申请
安装/配置:
//进入项目目录:(在搭建项目的时候安装了)
cnpm install vue-router --save
旧版路由
需要自己配置
//项目中载入,一般在main.js中载入:import VueRouter from 'vue-router'Vue.use(VueRouter)let router = new VueRouter({}) //其中配置路径和地址//在Vue中引入:new Vue({el: '#app',router,template: '<APP/>',components: { APP }})
新版路由:
自动配置好了,直接在router/index.js中设置即可
设置页面路由
一个vue页面
<template><div class="apple">213124</div>
</template>
<script>
export default {name: 'Apple'
}
</script>
<style scoped>
</style>
旧版
在new VueRouter({})所在页面引入:
import Apple from '@/components/Apple'routes: [mode:'history',{path:'/apple',component:Apple},{path:'/apple2',component:Apple2}]
新版
方法1:
const all = r => require.ensure([], () => r(require('../components/attendance/a_all')));
方法2:
const Login = (resolve) => {require(['@/components/Login/login'],resolve)};{path: '/hdwrj',name: 'hdwrj',component: hdwrj}
在APP.vue中引入
(会在这里显示)
<router-view></router-view>
路由定义
路由命名
{path:'/apple',component:Apple,name:'applePage'}
访问:<router-link :to="{name:'applePage'}">to apple</router-link>
命名路由视图
在router-view 上添加name
<router-view name='viewA '></router-view>
路由表中可以根据name定义页面
{path:'/apple',component:{viewA:Apple,viewB:OtherApple,},name:'applePage'}
路由嵌套(子路由)
{path:'/apple',component:Apple,childdren:[{path:'/childapple/',component:ChildApple}]},
内容要在Apple.vue中添加
<router-view></router-view>
页面跳转:
路由跳转
页面内跳转router-link
要在 mode:'history', 之下
<router-link :to="{path:'apple'},query: {id:id}">to apple</router-link><router-link :to="{path:'apple2'}">to apple2</router-link>普通页面跳转<router-link :to="{path:'apple'}">to apple</router-link>
基于当前路径跳转<router-link :to="'apple'">to apple</router-link>
根目录:<router-link :to="'/apple'">to apple</router-link>
动态设置:<router-link :to="apple">to apple</router-link>在data中:data(){reurn{apple:'apple'}}
传递参数:<router-link :to="{path:'apple',param:{color:'red'}}">to apple</router-link>可以访问 apple/red(参数)
改变router-link显示样式:<router-link :to="'apple'" tag="li">to apple</router-link>
在链接中设置参数
可以设置多层/apple/:color/:font/....
路由设置:path:'/apple/:color',
页面跳转:http://localhost:8080/apple/red
获取参数:$route.params.color
在?中的参数:query
路由:
{path:'/voucher',name: 'voucher',component: voucher
}传参:
this.$router.push({path:'/xxx',query:{id:id}
})接收参数:
this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法$route为当前router跳转对象，里面可以获取name、path、query、params等
在json中的参数:params
路由:
{path: '/startWh',name: 'startWh',component: startWh
}
传参:
this.$router.push({name:'xxx'params:{id:id}
})接收参数:
this.$route.params.id
注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
query和params区别
- query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
- params相当于post请求，参数不会再地址栏中显示
js中定义导航,跳转
router.push('apple') //或 {path:'apple'}
或
this.$router.push('/login');
路由重定向
比如默认页面是具体的某一个页面,比如访问根目录,会自动跳转到Apple.vue目录
{path:"/",redirect:'/apple'},
页面跳转–过渡
<transition name='fff'><keep-alive><!--缓存--><router-view></router-view></keep-alive></transition>