记vue 脚手架router-link踩过的坑

Posted 2021-03-07 388ximengpy

router-link在vue中用来做路由跳转，等于是封装过的a标签，也可以转换成别的标签，最近项目中遇到一个问题，app.js中导入主页home组件

 1 <div id="app">
 2       <div id="nav">
 3         <Home></Home>
 4       </div>
 5     <router-view  />
 6   </div>
 7 </template>
 8 <script>
 9 import Home from ‘./views/Home‘
10 export default {
11   components:{
12     Home
13   }
14 }

此时我在router中的index.js中引入其为“/”，然后我页面做了一个跳转，发现根本没办法点过去，rul变了，但是路由跳转不到一个新的页面，所有代码如下

<router-link to="city" replace>
    <div class="header-right">城市<i class = "iconfont icon-down-fill-xs"></i> </div>
  </router-link >             、//需要跳转的代码

import Home from ‘../views/Home.vue‘
import City from ‘../views/City.vue‘

Vue.use(VueRouter);

const routes = [
  {
    path: ‘/‘,
    name: ‘Home‘,
    component: Home,
  },
  {
    path: ‘/city‘,
    name: ‘City‘,
    component: City,

  },
]                  //路由表的引入

<template>
 <div>
  abdhdsif
 </div>
</template>
<script>
export default {
  name:"City"
}
</script>
<style lang = "less" scoped>

</style>     //跳转组件的代码

本来以为会打开一个新的页面，但是点了半天都没反应，后来才发现home组件占了所以位置，也就是上面app的代码写的有问题，删掉之后就可以了，：

<template>

  <div id="app">
      <div id="nav">
      </div>
    <router-view  />
  </div>
</template>
<script>

export default {
  components:{
  }
}
</script>
<style lang="less">

完美解决，去到不同的页面只需要改变路由就好了。