Vue学习之旅----路由基础搭建

最新推荐文章于 2025-03-07 14:55:50 发布

原创最新推荐文章于 2025-03-07 14:55:50 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

学习笔记专栏收录该内容

124 篇文章

订阅专栏

本文详细介绍如何使用 Vue.js 的路由模块 Vue-Router 进行页面导航和组件管理。通过实例展示了如何配置路由规则，包括基本路由、命名路由、重定向以及如何在组件中使用 router-link 和 router-view。同时介绍了组件生命周期函数的使用。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 1 引入组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
Vue.use(Router)

export default new Router({
  // 配置路由
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/home',
      name: 'Home',
      component: Home
    }, {
      path: '/news',
      name: 'News',
      component: News
    }, {
      // 重定向
      path: '*',
      redirect: '/home'
    }
  ]
})

<template>
  <div id="app">
    <router-link to='/home'>首页</router-link>
    <router-link to='/news'>新闻</router-link>
    <router-view />
  </div>
</template>

<script>

// 生命周期函数：组件挂载以及组件更新组件销毁的时候触发的一系列的方法，这些方法就叫做生命周期函数
// 引入
export default {
  data () {
    return {
      name: 'App'
    }
  },
  mounted () { // 请求数据，操作dom , 放在这个里面  mounted
    console.log('模板编译完成4')
  }
}
</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>