前端路由
前端路由就是Hash地址与组件之间的对应关系,路由可以在一个页面中跳转多个页面,首先导入vue-router包,在创建一个router文件夹,文件夹与components文件夹平齐,里面存放的是路由文件。
例如在router文件下存放一个index,js文件,里面是存放的router路由项目
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router =new VueRouter()
//导出router
export default router
main.js中引入这个路由文件
import router from '@/router/index.js'
//在模块化导入中,如果再导入文件夹下的文件时,省略了index.js,或者也去掉斜杠,则默认去找文件下的index.js文件
new Vue({
router: router // 或者直接写成router,因为router都是一样的
}).$mount('#app')
<router-view>占位标签
该标签只能只用于router路由里面,也要导入router包之后才能使用,只有在用户点击关于路由的标签后才会触发,也要引入相关的路由。
例如在App.vue中实现路由跳转。
<template>
<div id="App">
<a href="#/home">首页</a>
<a href="#/move">关于</a>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
<style></style>
在main.js也要引入相关的router文件,最上面的main.js已经演示。
router文件中的index.js文件写入
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入相关路由需跳转的组件
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
// 配置路由路径,这里的path路径就不需要在前加#,component是要跳转的组件。
{ path: '/home', component: Home },
{ path: '/move', component: Auto }
]
})
//导出router
export default router
<router-link>代替a标签
a标签中要使用href="#地址"才能实现路由的跳转,但在官方推荐中,最好使用router-link标签进行跳转,可以不写#,直接写地址。
<template>
<div id="App">
<router-link to="/home">首页</router-link>
<router-link to="/move">关于</router-link>
<hr />
<router-view></router-view>
</div>
</template>
重定向路由规则
重定向路由规则,主要是在进入页面后,直接跳转到哪里,或者在用户点击某个路由链接后,指定跳转到哪里
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
// 重定向规则,在访问ip地址+端口号的时候,直接跳转到/home路由下
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/move', component: Auto }
]
})
//导出router
export default router
路由嵌套实现
路由嵌套是指在子组件中再实现一个路由链接。
例如:再根据上面的auto组件中实现一个tab的链接,再app.vue中开始点击auto的路由时,auto中先不会显示auto的子组件路由链接,再点击auto组件中的tab路由则可以路由到tab组件中,路由依然再index.js中设置。
首先再auto组件中写入
<template>
<div id="App">
<router-link to="/move/tab">tab首页</router-link>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
<style></style>
router中index.js写入。
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/move',
component: Auto,
children: [
//子路由规则,可以在path路由路径上不加/
{ path: 'tab', component: Tab }
]
}
]
})
//导出router
export default router
重定向与默认子路由
在index.js中可以在跳转到关于页面时,直接跳转到子路由的tab组件上,一下有两种方法。默认子路由与重定向的区别也有,默认子路由如果再点击关于链接中的tab路由时,直接显示整个关于组件显示空。
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/move',
component: Auto,
//第一种方法是重定向
//redirect: '/move/tab'
children: [
//子路由规则,可以在path路由路径上不加/
//第二种方法是将默认子路由的path设置为空即可,他会直接跳转到这个路由上
{ path: '', component: Tab }
]
}
]
})
//导出router
export default router