router实现页面跳转

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>

first
A.vue
I

看到子窗口出现了

我将其理解成家庭模式
Dad . Mom , I.....Home

隐藏父窗口

修改成平级效果

image.png

子路由

image.png

移动到children中

效果:页面跳转不显示了
挂载路由 <router-view></router-view>

通常不会出现,偶尔可能因为node.js没有及时刷新

父窗口不隐藏

image.png

关于页面logo

在public文件夹中有个图标favicon.ico和一个index.html....我们打开的是index.html而不是.vue定义的....
他只是官网自定义中的一个文件类型,不能被浏览器直接打开..所以app.vue也只是一个入口模板