前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录演示代码演示运行截图如下:点击后,url跳转如下:代码页面跳转的关键程序结构如下:aaa.vue<template><div>我是aaa<button @click="back">点我返回</button></div></tem...
·
目录
演示
运行截图如下:
点击后,url跳转如下:
代码
页面跳转的关键
程序结构如下:
aaa.vue
<template>
<div>我是aaa
<button @click="back">点我返回</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">点我跳转</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
}
]
})
通过设置mode: 'history'可以去掉url下面的
更多推荐
已为社区贡献33条内容
所有评论(0)