單頁面多路由區操作

image.png

image.png

<template>
  <div id="app">
    <img src="./assets/logo.png">

     <div>

         <router-link to="/" >首頁</router-link>|
         <router-link to="/xin">第二頁</router-link>|
         <router-link :to="{name:'x1',params:{us:'xiao',xx:'zhazha'}}" >xin-x1</router-link>|
         <router-link :to="{name:'x2',params:{pa:'sun'}}">xin-x2</router-link>|
         <router-link :to="{name:'dan',params:{dan:'route'}}">dan</router-link>
     </div>

     <router-view></router-view>
     <router-view name="left" class="fd" ></router-view>
     <router-view name="right"  class="fy"></router-view>

  </div>
</template>

$router

image.png

import dan from '@/dan/dan'
import dan1 from '@/dan/dan1'
import dan2 from '@/dan/dan2'