上一节对路由的跳转及路由的配置进行过简单介绍,
首先是安装路由模块,采用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进行跳转。
如果上面文章对你有用,打赏下我吧@*@