欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue:路由及默认的跳转

程序员文章站 2024-02-13 17:00:58
...

第一步:在新建的components目录下创建如下所示的两个组件:

Home.vue

<template>
  <div>
    <h2> {{msg}}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'Home首页'
      }
    }
  }
</script>

News.vue

<template>
  <div>
    <h2>{{msg}}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'News头部',
      }
    }
  }
</script>

第二步:修改main.js的代码如下所示:

import Vue from 'vue';
import App from './App.vue';
// 引入并使用vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入组件
import Home from './components/Home';
import News from  './components/News';
//定义路径
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//实例化VueRouter
const router = new VueRouter({
  routes
})
//挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

第三步:App.vue

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/news">News</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

页面效果

默认页面

Vue:路由及默认的跳转

Home页面

Vue:路由及默认的跳转

News页面

Vue:路由及默认的跳转