记录-vue3.0之router路由器的使用

安装

详情参考：官网

安装Vue Router4.x版本目前可以通过

npm install vue-router@4

  "dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.0.2-beta.48",
    "vue": "^3.0.0-alpha.10",
    "vue-router": "^4.0.0-alpha.6"
  }

实例：

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";



const app = createApp(App);
app.use(router);//注意顺序
app.mount("#app");

router/index.js
配置路由规则

import { createRouter, createWebHashHistory } from "vue-router";
import   Home  from "../component/Home.vue";
import  About  from "../component/About.vue";
import  News from "../component/New.vue";




const routes = [
	{
		path: "/home",
		name: "Home",
		component: Home,
    children: [
      {
        path: '/home/news',
        component: News
      },
      {
        path: '/',
        redirect: '/about'
      }
    ]
    
	},{
    path: "/about",
		name: "About",
		component: About,
  }
  
  
];

const router = createRouter({
	history: createWebHashHistory(),
	routes,
});

export default router;

About.vue

<template>
    <h1>about</h1>
    <h2>{{msg}}</h2>
    <input v-model="message">
    <span>{{message}}</span>
</template>

<script>
export default {
    data(){
        return{
            message:'welcome to here'
        }
    },
   
    props:{
        msg:String
    }
}
</script>

<style>

</style>

Home.vue

<template>
    <h1>home-view</h1>
    <router-link to="/home/news"  class="list-group-item">二级标签</router-link>
    <router-view></router-view>
</template>

<script>
export default {
}
</script>

<style>

</style>

New.vue

<template>
    <h1>here is two</h1>
</template>

<script>
export default {
}
</script>

<style>

</style>

http://localhost:8080/#/home

http://localhost:8080/#/about

http://localhost:8080/#/home/news