14-基础-路由-vue-router-动态路由

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 1.设置链接 -->
        <router-link to="/home">主页</router-link>
        <!-- 目的: 点击三个不同的router-link 渲染同一个组件
        点击 篮球/足球/乒乓球按钮 -> 渲染Ball组件 -->

        <router-link to="/ball/football">足球</router-link>
        <router-link to="/ball/basketball">篮球</router-link>
        <router-link to="/ball/pp">乒乓球</router-link>
        <!-- 2. 提供容器:将来渲染组件 -->
        <router-view></router-view>

    </div>
    <script src='./vue.js'></script>
    <script src="./vue-router.js"></script>
    <script>
        // 3. 提供要渲染的组件选项(对象)
        const Home = { template: `<div>首页组件</div>` };
        const Ball = { template: `<div>我是球组件</div>` };
        const routes = [{
            path: "/home",
            component: Home
        }, {
            //  /ball/football
            //  /ball/basketball
            //  /ball/pp
            // 视图中->点击足球按钮->url标识变成/ball/football -> 找路由配置
            // -> 发现有动态路由配置 -> id的值就是football值
            // :固定写法 id可以任意命名
            path: "/ball/:id",
            component: Ball
        }];
        // 4. 实例化路由对象
        const router = new VueRouter({ routes });
        new Vue({
            el: '#app',
            // 6. 挂载(使用)路由
            // router:router
            router,
            data: {},
            methods: {}
        });
    </script>
</body>

</html>
14-基础-路由-vue-router-动态路由

猜你喜欢
