router实现页面跳转

2020-01-03 本文已影响0人荼蘼toome

first.vue

<template>
    <div>
        <router-link to="/a">Dad</router-link>

        <router-link to="/b">Mom</router-link>
    </div>
</template>
<script type="text/javascript"></script>
<style type="text/css"></style>

新键A,B页面

凡是带有跳转的都需要在index.js中定义路由

1.通过import进行引用
2.定义页面路由

我最先写的跳转,,是<router-link to="A.vue">
也是可以跳转的.但是没有字幕AAA
改成/a即可...跟index.js中定义的路由一致

增加返回

<router-link to="/">返回</router-link>
/ 代表返回根一级的页面

效果三...嵌套路由

A1.vue

<template>
    <div>
        <p>I</p>
        <p><router-link to="/a">Dad</router-link></p>
        <p><router-link to="/">Home</router-link></p>
    </div>
</template>

children:[{},{}]
页面中的跳转..父窗口,子窗口
路径 {}

children

当没有挂载路由的时候是没有办法进入跳转子页的
挂载路由识别子路由
<router-view><router-view>

<template>
    <div>
    <p>Dad</p>
    <p><router-link to="/">Home</router-link></p>
    <p><router-link to="/A1">I</router-link></p>
    <!-- 挂载路由 -->
    <router-view></router-view>
    </div>
</template>