vue系列文章（21）路由指定名字和路由跳转方法

上一节对路由的跳转及路由的配置进行过简单介绍，

首先是安装路由模块，采用npm install vue-router --save

安装完成后引入路由模块

在main.js中进行引入

import VueRouter from 'vue-router';

Vue.use(VueRouter)

const routes = [

{path: '/' ,name: 'homeLink',component:Home},

{path:'/admin',name:'adminLink',component:Admin}

]

const router = new VueRouter({

routes,

node: 'history'

})

new Vue({

router,

el: '#app',

renter: h=>h(App)

})

在上面的代码中，routes加入了name属性，是对路由的名字进行重命名。

那么我们就可以在html代码中这样使用连接。

<li><router-link :to="{name: 'homeLink'}" class="nav-link">主页</router-link> </li>

设置指定跳转的方法：

我们在html中加入按钮，点击后进行跳转

 

<button @click="goToMenu" class="btn btn-success">let's order!</button>

点击goToMenu后进行跳转的方法为：

 

goToMenu() {
  //跳转到上一次浏览的页面
  // this.$router.go(-1);
  //跳转到指定的页面
  // this.$router.replace('/menu');
  //跳转到指定路由名字下
  // this.$router.replace({name: 'adminLink'})
  //通过push进行跳转
  // this.$router.push('/menu')
  this.$router.push({name: 'adminLink'})
}

this.$router.go(-1)，是跳转到上一次浏览的页面

this.$router.replace('/menu'); //跳转到指定的页面。

this.$router.replace({name:'adminLink'}); //跳转到指定的路由名字下。

this.$router.push('/menu');通过push进行跳转

this.$router.push({name: 'adminLink'}); 这也是通过push进行跳转。

如果上面文章对你有用，打赏下我吧@*@