//這是在router/index.js,全部;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
   //在此處配置路由;
]
//在router4中使用createRouter替代了new VueRouter;
const router = createRouter({ 
  history: createWebHistory(process.env.BASE_URL),
  routes
  //在此處引入所有頁面的路由配置數(shù)組routes;
})

export default router   
//導出包含著所有路由配置的router對象,
//在main.js中注入后供全局使用;

//這是在router/index.js,末尾部分略去;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
//引入3個頁面控件;
const routes = [
    {
        path: '/',  /* 規(guī)定初始URL對應的頁面 */
        name: 'Home',
        component: Home   /* 規(guī)定默認在Home頁面 */
   },
   {
        path: '/about',/* 規(guī)定URL新增段為/about時跳轉 */
        name: 'About',
        component: About  /* 跳轉至About */
   },
   {
        path: '/news', /* 規(guī)定URL新增段為/news時跳轉 */
        name: "News",
        component: News  /* 跳轉至News */
   },
]

  <router-link to="要在URL上添加的字符">XXX</router-link>
  //<router-link>會被渲染成為<a>;
  <router-view />
  //這倆需要組合使用;

<!-- 這是在App.vue中 -->
<template>
  <div id="nav">
  <!-- to屬性規(guī)定如何改變URL; -->
  <!-- Tag屬性規(guī)定router-link標簽需要被渲染成什么HTML元素; -->
    <router-link to="/" Tag="a">Home頁面</router-link> |
    <router-link to="/about" Tag="a">About頁面</router-link> |
    <router-link to="/news" Tag="a">News頁面</router-link> |
    <router-link to="/login" Tag="a">Login</router-link>
  </div>
  <router-view />
</template>

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
    //直接在這里引入了About并且賦值給了component;
  },
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue")
        //直接在這里引入了About并且賦值給了component;
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
        //直接在這里引入了About并且賦值給了component;
  },
]

//這是縮減過的router/index.js;
const routes = [
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue"),
    children: [
      {
        path: 'NewsChild-1', 
        //子路由不用在前面寫"/"和上一層路徑,
        //但其實解析是是會加上的;
        //規(guī)定URL出現(xiàn)/News/NewsChild-1時,
        //跳轉至component對應的頁面;
        component: () => import("../views/NewsChild-1"),
      }
    ]
  },
]

<!-- 這是News.vue; -->
<template>
  <h1>News</h1>
  //規(guī)定在被觸發(fā)時URL增加/News/NewsChild-1;
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <router-view></router-view>
</template>

//這是在router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
  //我們在此處也不要把path的值寫死;
    path: '/user/:userId',
    name: 'User',
    component: () => import('../views/User.vue'),
  }
];

<!-- 這是在App.vue里 -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <!-- 在此處使用v-bind將userId數(shù)據(jù)調用; -->
    <!-- 將/user/作為字符串拼接給userId -->
    <router-link v-bind:to="'/user/' + userId">用戶</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    //在此處設定userId的數(shù)據(jù)為baixia;
      userId: "baixia",
    };
  },
};
</script>

<!-- 在App.vue中(發(fā)方) -->
<template>
  <div id="app">
    <router-link v-bind:to="'/user/' + userId">用戶</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      userId: "baixia",
    };
  },
};
</script>

//在user.vue中(收方)
export default {
    name:"user",
    computed: {
        userId() {
            return this.$router.params.userId
//將this.$router.param.userId的值,
//即App.vue的router-link里傳入的userId返回,
//以作為計算屬性userID()的值
        }
    }
}

export default {
    name:"user",
        computed: {
            userId() {
            //這里也應為獲取abc屬性;
                return this.$router.params.abc
           }
        }
}