VueRouter
Vue-router 实现页面导航
页面导航
- 添加新的页面组件
- 配置路由,为新页面添加新的路由
- App.vue中添加router-link标签,相当于a标签,链接到路由分配的组件页面
// test1.vue
<template>
<div>
<h3>新的路由页面</h3>
</div>
</template>
<script>
export default {
name:'test1',
}
</script>
<style scoped>
</style>
// App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to='/'>主页</router-link>
<router-link to='/test'>测试</router-link>
</div>
<router-view/>
</div>
</template>
// index.js
import test1 from '../components/test1'
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/test',
name:'test1',
component:test1
}
]
})
添加子路由
- 添加子路由页面的组件
- 配置路由,添加子路由配置
- 在App.vue中,添加router-link标签引入子路由页面
//testFir.vue
<template>
<div>
<h3>子路由1</h3>
<div>增加一个新的组件,通过路由router分配,形成一个新的分页面</div>
</div>
</template>
<script>
export default {
name:'testFir',
}
</script>
<style scoped>
</style>
//testSce.vue
<template>
<div>
<h3>子路由2</h3>
<div>增加一个新的组件,通过路由router分配,形成一个新的分页面</div>
</div>
</template>
<script>
export default {
name:'testSec',
}
</script>
<style scoped>
</style>
// index.js
{
path:'/test',
name:'test1',
component:test1,
children:[
{path:'/', component:test1 },
{path:'testFir',component:testFir},
{path:'testSec',component:testSec}
]
}
// App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to='/'>主页</router-link>
<router-link to='/test'>测试</router-link>
<router-link to='/test/testFir'>测试1子路由1</router-link>
<router-link to='/test/testSec'>测试2子路由2</router-link>
</div>
<router-view/>
</div>
</template>
Vue-router 单页面多路由区域操作
核心:将多个路由页面添加到主页面的不同区域
- App.vue添加router-view标签,注意该标签是一个自结束标签
- 添加多个路由文件
- 配置路由,增添router-view的name属性,通过name属性将router-view与路由页面对应起来,实现单页面多个区域的分配
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-view name='left' />
<router-view name='right'/>
</div>
</template>
//sectwo.vue
<template>
<div id='right'>
<h3>主页面右边区域的内容</h3>
<p>所有的一切都是在右边的,世界都是围绕着右边才能进行运转的</p>
<p>整个世界都在靠右移动,右边的比重整个都在加重</p>
<router-view/>
</div>
</template>
<script>
export default {
name:'sectwo',
}
</script>
<style scoped>
#right {
width:50%;
height:200px;
float:left;
background-color:rgb(183, 231, 240);
}
</style>
//secone.vue
<template>
<div id='left'>
<h3>主页面左边区域的内容</h3>
<p>所有的一切都是在左边的,世界都是围绕着左边才能进行运转的</p>
<p>整个世界都在靠左移动,左边的比重整个都在加重</p>
</div>
</template>
<script>
export default {
name:'secone',
}
</script>
<style scoped>
#left {
width:50%;
height:200px;
float:left;
background-color:wheat;
}
</style>
//index.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
components: {
default:Hello,
left:secone,
right:sectwo
}
},
]
})
Vue-router 利用url传参数
//index.js
import talk from '../components/talk'
{
path:'/ta/:theme/mains',
component:talk
}
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to='/'>main page</router-link>
<router-link to='/ta/122/oneday'>talk page</router-link>
</div>
<router-view/>
</div>
</template>
Vue-router 重定向
重定向即是不指向原有的链接而是指向重新指定的链接地址
//index.js
{
path:'/ret',
redirect:'/'
}
// App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to='/'>main page</router-link>
<router-link to='/ret'>return mains</router-link>
</div>
<router-view/>
</div>
</template>
Vue-router alias别名的使用
alias即是通过alias给当前的路由页面设置一个别名,可以用来访问当前页面的内容
//index.js
{
path:'/ta',
component:talk,
alias:'/mu'
}
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link to='/ta'>talk page</router-link>
<router-link to='/mu'>moofeng</router-link>
</div>
<router-view/>
</div>
</template>
Vue-router 设置路由mode和添加404页面
设置路由mode模式,去除页面地址的#号
mode:history
去除#号mode:hash
带有#号
//index.js
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
添加404页面
- 添加404页面
- 配置路由
//error.vue
<template>
<div>
<p>Your request is error,please make sure your request!</p>
</div>
</template>
//index.js
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},{
path:'/ta',
component:talk,
alias:'/mu'
},{
path:'*',
component:error
}
]
})
编程式导航
在程序中书写导航,譬如前进、后退、跳转
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<button @click='after'>返回</button>
<button @click='before'>往前</button>
<button @click='back'>回首页</button>
</div>
<div>
<router-link to='/'>main page</router-link>
<router-link to='/ta'>talk page</router-link>
<router-link to='/mu'>moofeng</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
after(){
this.$router.go(-1)
},
before(){
this.$router.go(1)
},
back(){
this.$router.push('/')
}
}
}
</script>