vue开发一<router>

router

我的结构

about.vue

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
        <p><router-link to="/about1">转向about1</router-link></p>
        <P><router-link to="/">返回首页</router-link></P>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

about1.vue

<template>
    <div>
        <p>我是about1</p>
        <p><router-link to="/about">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

<script>
    export default {
        name: "about1"
    }
</script>

<style scoped>

</style>

first.vue

<template>
    <div>
        <p><router-link to="/home">转向home页面</router-link></p>
        <p><router-link to="/about">转向about页面</router-link></p>
    </div>
</template>
<script>
    export default {
        name: "first"
    }
</script>
<style scoped>
</style>

home.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
        <P><router-link to="/">返回首页</router-link></P>
        <P><router-link to="/home1">转向home1</router-link></P>
        <router-view></router-view><!-- 挂载路由的，没有的话跳转不了home1-->
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 组件"
            }
        }
    }
</script>

home1.vue

<template>
    <div>

        <p>我是home1</p>
        <p><router-link to="/home">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

<script>
    export default {
        name: "home1"
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {

  }
</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>

main.js

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

// 引入路由
import router from "./router.js"  
new Vue({//有history 和hash模式
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

router.js

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import Home from "./components/home.vue";
import About from "./components/about.vue";
import Home1 from "./components/home1.vue";
import First from "./components/first.vue";
import About1 from "./components/about1.vue";
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
    {
        path:"/",
        component:First  //首页
    },
    {
        path:"/home",
        component: Home,
        children:[{       //父子页的内嵌布局
            path: '/home1',
            component:Home1
        }]
    },
    {
        path: "/about",
        component: About  //父子页面的平行布局
    },
    {
        path: "/about1",
        component: About1
    },
]
var router =  new VueRouter({
    mode:'history',//消除url中#
    routes
})
export default router;

效果