vue-router路由基础使用

cnd导入vue-router

<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

<div id="app">
    <a href="#/login">登录</a>
    <a href="#/reg">注册</a>
    <!--占位符-->
    <router-view></router-view>
</div>
<script>

    //component 的模板对象
    const login = {
    
    
        template: "<h1>登录</h1>"
    };
    const reg = {
    
    
        template: "<h1>注册</h1>"
    };

    //创建一个路由对象，当导入vue-router包之后，在window全局对象中 就有了一个路由的构造函数 叫做VueRouter
    //在new路由对象的时候，可以为构造函数，传递一个配置对象
    const routerObj = new VueRouter({
    
    
        // route 这个配置对象中的 route 表示 路由匹配规则 routes 就是多个
        routes: [
            //path 监听 路由链接地址
            //component path中路径 相匹配 则展示 component 中的内容
            {
    
    path: '/login', component: login},
            {
    
    path: '/reg', component: reg}
        ]
    });

    new Vue({
    
    
        el: "#app",
        data: {
    
    },
        methods: {
    
    },
        //将路由规则对象 注册 到vm实例对象上 用来 监听 url 地址的变化 然后展示对应组件
        router: routerObj
    });
</script>