Vue router路由安装配置及页面间跳转

一、安装配置

1. 安装
   项目终端输入 npm install vue-router或cnpm install vue-router或yarn add vue-router
   

2. 在src下新建router.js文件：
   import Vue from ‘vue’
   import VueRouter from ‘vue-router’
   Vue.use(VueRouter)

3. 新建页面
   src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue：

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
  }

4.router.js配置:
（1）引入页面
import Home from ‘./views/Home/’
（2）实例
export default new VueRouter ({
// 配置路由信息
routes: [
{
path: ‘/’,
redirect: ‘/home’ //设置默认指向
},
{
path: ‘/home’,
component: Home
}
]
})
5.App.vue：

<!-- 将页面渲染到App.vue里 -->
<router-view></router-view>

6.main.js：

import Vue from 'vue'
import App from './App.vue'

// 引入router实际挂载下
import router from './router'

Vue.config.productionTip = false

new Vue({
    // 实例中增加挂载
  router,
  render: h => h(App),
}).$mount('#app')

打开浏览器即可看到页面。

二、页面间的跳转

1. 在components文件下新建三个组件，并编辑下内容

  <div>
    text1内容 
  </div>

2. router.js引入并配置路径：

// 引用组件
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'


export default new VueRouter ({
    // 配置路由信息
    routes: [
      {
        path: '/',
        redirect: '/home'  //设置默认指向
      },
      {
        path: '/home',
        component: Home,
        // 嵌套子路由
        children:[
            {
                path:'text1',
                component:Text1
            },
            {
                path:'text2',
                component:Text2
            },
            {
                path:'text3',
                component:Text3
            }
        ]
        
      },
    ]
})

3. Home页面index.vue：

<router-link to="/home/text1">
  <span>text1页面标题</span>
</router-link>
<router-link to="/home/text2">
  <span>text2页面标题</span>
</router-link>
<router-link to="/home/text3">
  <span>text3页面标题</span>
</router-link>
<!-- 渲染 -->
<router-view></router-view>

4. 效果
   

本文地址：https://blog.csdn.net/qq_44718526/article/details/107555278