从零开始学VUE之VueRouter(Vue-router基本使用)

2021-07-02 11:07:00 阅读：174 来源： 互联网

标签：about VUE name import Vue VueRouter router home

使用Vue-router

创建组件

About.vue

<template>
  <div>
    <h2>this is about!</h2>
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

Home.vue

<template>
  <div>
    <h2>this is home!</h2>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

在Index.js中添加映射规则

import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import home from '../components/Home'
import about from '../components/About'

// Vue加载
Vue.use(Router)

// 传入路由映射配置 导出路由实例
export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/home',
      name: 'home',
      component:home
    },
    {
      path: '/about',
      name: 'about',
      component:about
    },
  ]
})

在App.vue中添加导航

通过router-view展示

<template>
  <div id="app">
<!--    <img src="./assets/logo.png">-->
<!--    导航链接-->
    <router-link to="/home">主页</router-link>
    <router-link to="/about">关于</router-link>
<!--    用于展示组件-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

默认展示首页

增加index.js的配置

// 在默认的情况下 重定向到主页
    {
      path: '',
      redirect: "/home"
    },

默认跳转的uri是使用的hash方式,这样会留下history历史记录,也就是说可以通过浏览器的左右箭头控制前后跳转,并且路径中间会有#号

如果不希望存在#,可以设置模式为history

// 设置模式为 history
mode: 'history',

如果不希望存在浏览记录History可以将to 改为replace

可以在 router-link 中添加 replace 属性

标签：about,VUE,name,import,Vue,VueRouter,router,home
来源： https://blog.51cto.com/u_15196075/2967913

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

从零开始学VUE之VueRouter(Vue-router基本使用)

使用Vue-router

默认展示首页