22-路由_vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
       <h3>路由</h3>

        <!--选择访问哪个路由-->
        <a href="#/login">用户登录</a>
        <a href="#/reg">用户注册</a>

        <!--显示路由组件标签-->
        <router-view></router-view>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--路由cdn-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js "></script>
<script>
    //登录组件
    const login = {
        template: `<div><h3>用户登录</h3></div>`
    };

    //注册组件
    const register = {
        template: `<div><h3>注册组件</h3></div>`,
    }

    //为了防止用户输入错误路径有页面找不到提示，就像后端那样，我们设置一个404组件
    //404组件
    const notFound = {
        template: `<div><h3>当前页面走丢了</h3></div>`
    }

    //1、创建路由规则对象
    const router = new VueRouter({
        routes:[ //配置路由规则
            // {path: '/', component: login}, //根路由：即打开页面时展示的组件， 但是这样我们  根路径/  和  /login都展示登录组件，一个组件对应两个路径，不推荐
            {path: '/', redirect:'/login'},//用重定向的方式解决上述问题
            {path:'/login', component:login},
            {path: '/reg', component: register},
            {path: '*', component: notFound} //通配符：匹配任意不存在的路由
        ]
    });

    const app = new Vue({
        el: "#app",
        data:{},
        methods:{},
        components:{
            login,
            register
        },
        //2、注册路由
        router:router
    });
</script>