router初始化

一.初始界面为home

在index.js中重定义一个默认指向/home的路由

  {
    path: '',
    //重定向
    redirect:'/home'
  }

二.以history模式初始化

const router = new VueRouter({
  //配置路由与组件之间的应用关系
  routes: routes,
  mode: 'history'
})

三.router-link 属性

to: 指向路由

tag:指定渲染之后的元素种类

replace:以replace取代push

active-class:活跃状态的属性名，可以在路由配置统一修改

四.代码方式跳转

<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>
<router-view></router-view>




export default {
  name: 'App',
  methods: {
    homeClick() {
      //通过代码修改路径
      this.$router.push('/home')
      console.log('homeClick');
    },
    aboutClick() {
      this.$router.push('/about')
      console.log('aboutClick');
    }
  }
}