vue中的路由1，从0初始化一个路由

最新推荐文章于 2024-07-04 17:04:23 发布

bhots

最新推荐文章于 2024-07-04 17:04:23 发布

阅读量581

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45180205/article/details/120252261

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue.js中设置和初始化路由的步骤，包括安装vue-router、创建router文件夹、定义组件、配置路由、在main.js中引入路由、在父组件中编写跳转方法。特别强调了组件的生命周期和文件组织结构，以及如何通过router-link和router-view实现页面间的导航。

摘要由CSDN通过智能技术生成

在vue建立以后初始化一个路由的常规写法

1.npm下载路由

npm i vue-router

2.在目录下创建一个router文件夹专门用来放router配置文件，新建index.js
在这里插入图片描述
3.首先你新建两个vue组件About，Home 作为路由的两个跳转对象

<template>
  <div class="hello">
      这个是About组件
  </div>
</template>

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

4.编写基础的路由文件该文件专门创建整个应用的路由器
该文件专门创建整个应用的路由器
在这里引入刚刚创建的两个组件

import VueRouter from 'vue-router'
//引入路由器
import About from '../pages/About'
import Home from '../pages/Home' 

const router= new VueRouter({
    routes:[
        {
            path:'/about', 
            component:About
        },
        {
            path:'/home',
            component:Home,
        }
    ]
})
export default router

5.在main.js引入上一步创建的路由文件

//引入路由器
import router from './router/index.js'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

new Vue({
  render: h => h(App),//是上面那个的缩写
  router:router,//在这里加入文件
}).$mount('#app')
//$mount('app')等于 el:"#app"一样的意思

6.在父组件编写跳转的方法

<template>
  <div id="app">
    <thetitle></thetitle>

  
    <div> 
        <!-- 导航区 -->
        <router-link class="roulink" active-class="active" to="/about">about</router-link>
        <router-link class="roulink" active-class="active" to="/Home">Home</router-link>
    </div>
    <div>
      <!-- 页面显示区 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import thetitle from './components/Titile'
export default {
  name: 'App',
  components:{thetitle},
}
</script>