Vue Router 动态路由实践-优快云博客

本文链接：https://blog.youkuaiyun.com/LiuPangZi6/article/details/101543814
<!DOCTYPE html>
<html lang="en">
<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>
    <!-- 需要注意这里的文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<style>
.active{
    color: red;
}
</style>
<body>
    <div id="app">
        <ul>
            <li>
                <router-link active-class='active' to='/home'>home</router-link>
            </li>
            <li>
                <router-link active-class='active' to='/second'>second</router-link>
            </li>
            <li>
                <router-link active-class='active' to='/user/junkai'>junkai</router-link>
            </li>
            <li>
                <router-link active-class='active' to='/user/yiming'>yiming</router-link>
            </li>
            <li>
                <router-link active-class='active' to='/user/siyou'>siyou</router-link>
            </li>
            <li>
                <router-link active-class='active' to='/goods/110/TCL'>电视商品</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</body>
<script>
/**
 * 1. 定义好组件，可以是全局组件也可以是局部组件
 * 2. 定义路线： 路径和组件的对应关系
 *      a. {path: '指明路径', component: '组件对象'}
 *      b. 定义一个重定向，防止用户输入的地址没有匹配的，提高用户体验
 * 3. 定义一个VueRouter 对象
 *      a. 把定义好的路线和VueRouter 关联起来，提供给Vue对象使用
 *      b. VueRouter({'routes': routes}),参数是一个JSON对象
 * 4. 将VueRouter对象注册到Vue对象中
 *      a. 在Vue配置信息中添加 router 关键字，值是 VueRouter对象
 * 5. 在router-link组件中，如果要标记当前选中的状态，需要添加 active-class='active'，active为自定义的样式
 * 6. 在routes 中定义 动态路由
 * {
        // 匹配规则 ‘/user/自定义’， 如果是‘/user’是不匹配
        // 使用 this.$route.params.username 来获取 url中的变量
        path: '/user/:username',  
        component: UserComponent
    }
 * 
*/

var HomeComponent = Vue.component('home-component', {
        // 需要在html代码里定义一个template，然后设置ID 为parentId
        template: `
            <div>
                <div>我是Home</div>
            </div>
        `
});

var SecondComponent = Vue.component('second-component', {
        // 需要在html代码里定义一个template，然后设置ID 为parentId
        template: `
            <div>
                <div>我是 SecondComponent</div>
            </div>
        `
});

var goodsComponent = Vue.component('second-component', {
        // 需要在html代码里定义一个template，然后设置ID 为parentId
        template: `
            <div>
                <div>goodsComponent</div>
                <div>{{$route.params.styleId}}</div>
                <div>{{$route.params.brand}}</div>
                <div></div>
            </div>
        `
});

var UserComponent = Vue.component('second-component', {
        // 需要在html代码里定义一个template，然后设置ID 为parentId
        template: `
            <div>
                <div>我是 UserComponent</div>
                <div>{{$route.params.username}}</div>
                <div>{{userInfo}}</div>
            </div>
        `,
        data: function () {
            return {
                userInfo: null
            }
        },
        mounted: function () {
            var username = this.$route.params.username;
            var that = this;
            console.log(username);
            debugger
            // 模拟ajax
            setTimeout(function () {
                that.userInfo = {
                    username: 'siyou',
                    age: 18,
                    location: '长沙'
                }
            },1000);
        }
});


// 定义了 路线，即 什么url 对应 什么组件
var routes = [{
    path: '/home',
    component: HomeComponent
},{
    path: '/second',
    component: SecondComponent
},{
    // 匹配规则 /user/自定义， 如果是‘/user’是不匹配
    path: '/user/:username',  
    component: UserComponent
},{
    // 匹配规则 /user/自定义， 如果是‘/user’是不匹配
    path: '/goods/:styleId/:brand',  
    component: goodsComponent
},{
    path: '*',
    redirect: '/second'
}];

var router = new VueRouter({
    'routes': routes
});

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            name: 'hongyang'
        }
    },
    // 定义Vue-router
    'router': router
    // router
})
</script>
</html>
vue 动态路由
