安装/配置:
//进入项目目录:(在搭建项目的时候安装了)
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>
