vue-router是一个单页面的路由器,也就是说所有的跳转都会在这个页面实现。
1、简单的跳转。
①首先要安装vue-router,利用npm进行安装
npm install vue-router或者cnpm install vue-router
②在APP.vue进行引用,<router-link to="/user">user</router-link> router-link指定路径,to指向所要跳转的url
<router-view></router-view>显示url的内容,也可写成<router-view/>
<template>
<div id="app">
<header>
<router-link to="/about">about</router-link>
<router-link to="/user">user</router-link>
<router-link to="/home">导航</router-link>
<router-view></router-view>
</header>
</div>
</template>
②在component文件夹新建about.vue home.vue文件,按照默认模版
③在router文件夹下新建一个router.js文件,进行配置
引入vue和vue-router,切记要加上Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
引入你新建的about.vue home.vue文件,配置路由,指定路由和组件之间的关系
const routes = [{
path: '/home',//指向路径,也就是url
component: home,//加载的组件
},
{
path: '/about',
component: about
},
]
定义router,完整的router.js代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './components/home.vue'
import about from './components/about.vue'
import phone from './components/home/phone.vue'
import computer from './components/home/computer'
const user = { template: '<div>nihao</div>' }
// const phone = { template: '<div>这是一部华为手机</div>' }
// const computer = {
// template: `
// <div>这是一部戴尔电脑
// <router-view class="home"></router-view>
// </div>
// `
// }
Vue.use(VueRouter)
const routes = [{
path: '/home',
component: home,
children: [{
path: 'computer',
component: computer
},
{
path: 'phone',
component: phone
}
]
},
{
path: '/about',
component: about
},
{
path: '/user',
component: user
}
]
var router = new VueRouter({
mode: 'history',
base: __dirname,
routes
})
export default router
重点或者易错点:export default router这句话要记得加上,不然会报下面的警告
④配置main.js,详细见下面代码
import Vue from 'vue'
import App from './App'
// 引入路由
import router from './router'
// 引入echarts
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
// 注入到根实例中
components: { App },
render: h => h(App)
})
2、子路由的跳转
在1的基础,进行子路由的跳转,
①在home文件夹下新建两个vue文件,作为子路由所要展示的内容
②在router中配置子路由,在上一节点的内容加上子路由,利用chilren特性
③在父页面写上
<router-link to="/user">user</router-link>
<router-view></router-view>
以显示子页面的内容
具体效果:
3、传递参数
①通过路由传参
为每一个路由命名,然后取得路由的名字
②通过绑定to参数的传递
命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标页面接收传递参数时使用params
特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的,同时这个参数是虚拟的,而非真实的,也就是说当你再次刷新的时候,页面上是获取不到值的