vue之vue-router跳转

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

vue之vue-router跳转

一、配置

在初始化使用vue-cli的时候会有vue-router的安装选择，选择安装即可。

二、嵌套路由

一般情况下，登录和项目页面属于同级，所以App.vue 只是作为一个存放组件的容器。

所以一层路由完成不了我们的需求。

在vue-cli搭建完成后，我们只需要修改router/index.js中的路由配置即可。

路由配置由下面这段代码可清晰的理解：

Vue.use(Router)export default new Router({
routes: [
{
path: '/',
name: 'login',
component: login,
},
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/homepage',
name: 'homepage',
component: homepage,
children: [
{
path: '/',
name: 'Jtnc',
component: Jtnc
},{
path: '/Jtnc',
name: 'Jtnc',
component: Jtnc
}
]
}
]
})

当路由配置好后，在页面中加入 <router-view>，当路由切换时， <router-view>中的内容就会切换改变。

三、使用 <router-link> 映射路由

类似于a标签的封装，在编译之后，<router-link> 会被渲染为 <a> 标签， to 会被渲染为 href

例：

<router-link to="/home">

四、编程式导航

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转

// 字符串
this.$router.push('/home/first')// 对象
this.$router.push({ path: '/home/first' })// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

参考资料：https://www.cnblogs.com/wisewrong/p/6277262.html