首页手记 Vue2.0路由学习探索总结---动态路由配置

Vue2.0路由学习探索总结---动态路由配置

标签：

Vue.js

Vue2.0路由学习探索总结---动态路由配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态路由配置</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue-router.js"></script>
    <style>
        .router-link-active {
            color: red
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/bar">/user/bar</router-link>
        <router-link to="/user/see">/user/see</router-link>
        <router-link to="/user/hello">/user/hello</router-link>
    </p>
    <router-view></router-view>
</div>
</body>
<script>
    const User = {
        template: `<div>User {{ $route.params.id }}</div>`
    };
    const router = new VueRouter({
        routes: [
            {path: '/user/:id', component: User}
            // 动态路径参数 以冒号开头,一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params
        ]
    });
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</html>

点击查看更多内容