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

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

程序员文章站 2022-04-10 15:03:33
安装项目终端输入 npm install vue-router或cnpm install vue-router或yarn add vue-router在src下新建router.js文件:import Vue from ‘vue’import VueRouter from ‘vue-router’Vue.use(VueRouter)新建页面src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue......

一、安装配置

  1. 安装
    项目终端输入 npm install vue-router或cnpm install vue-router或yarn add vue-router
    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>
  1. 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
            }
        ]
        
      },
    ]
})
  1. 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>
  1. 效果
    Vue router路由安装配置及页面间跳转

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