目錄

?

演示

代碼

---

演示

運(yùn)行截圖如下：

點(diǎn)擊后，url跳轉(zhuǎn)如下：

?

?

代碼

頁面跳轉(zhuǎn)的關(guān)鍵

程序結(jié)構(gòu)如下：

aaa.vue

<template><div>我是aaa<button @click="back">點(diǎn)我返回</button></div></template><script>export default {name: 'aaa',/*data () {return {msg: '哈哈'}},*/methods:{back(){this.$router.push('/')}}} </script>

HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1><button @click="go">點(diǎn)我跳轉(zhuǎn)</button></div></template><script>export default {name: 'HelloWorld',data () {return {msg: '哈哈'}},methods:{go(){this.$router.push('/aaa')}}} </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import aaa from '@/components/aaa';Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/aaa',name: 'aaa',component: aaa}] })

通過設(shè)置mode: 'history'可以去掉url下面的

總結(jié)

以上是生活随笔為你收集整理的前端笔记-vue中使用router进行页面跳转及除掉url中的#的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。