Vue Router 实战-优快云博客

本文链接：https://blog.youkuaiyun.com/MikazukiMo/article/details/105932494

1.基础例子
routes路由规则

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<body>
    <div id="app">
        <!-- 创建路由连接 -->
        <router-link to="/home">home</router-link>
        <router-link to="/test">test</router-link>
        <!-- 路由占位符,显示组件模板 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 组件
    const Home = {
        template: "<h1>Home</h1>"
    }
    const Test = {
        template: `
            <h1>test</h1>
        `
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            { path: "/home", component: Home },
            { path: "/test", component: Test }
        ]
    })
    //创建Vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由实例对象
        router
    })
</script>

2.路由重定向-redirect

//创建路由实例对象
const router = new VueRouter({
    //设置路由的规则
    routes: [
        //redirect进行路由重定向
        { path: "/", redirect: "/home" },
        { path: "/home", component: Home },
        { path: "/test", component: Test }
    ]
})

3.嵌套路由-children规则

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<body>
    <div id="app">
        <!-- 创建路由连接 -->
        <router-link to="/home">home</router-link>
        <router-link to="/test">test</router-link>
        <!-- 路由占位符,显示组件模板 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 组件
    const Tab1 = {
        template: "<h1>Tab1</h1>"
    }
    const Tab2 = {
        template: "<h1>Tab2</h1>"
    }
    const Home = {
        template: "<h1>Home</h1>"
    }
    const Test = {
        template: `
        <div>
            <h1>test</h1>
        
            <!-- 创建路由连接 -->
            <router-link to="/test/tab1">tab1</router-link>
            <router-link to="/test/tab2">tab2</router-link>
            <!-- 路由占位符,显示组件模板 -->
            <router-view></router-view>
        </div>
        `
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            { path: "/home", component: Home },
            {
                path: "/test", component: Test,
                //设置子路由规则
                children: [
                    { path: "/test/tab1", component: Tab1 },
                    { path: "/test/tab2", component: Tab2 }
                ]
            }
        ]
    })
    //创建Vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由实例对象
        router
    })
</script>

4.动态路由匹配

$route.params

<body>
    <div id="app">
        <!-- 创建路由连接 -->
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <!-- 路由占位符,显示组件模板 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 组件
    const User = {
        //通过$route.params.id获取id
        template: "<h1>{{$route.params.id}}</h1>"
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            { path: "/user/:id", component: User },
        ]
    })
    //创建Vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由实例对象
        router
    })
</script>

5.路由组件传参–props
props比&route,params更加的灵活
5.1.props为布尔值

<body>
    <div id="app">
        <!-- 创建路由连接 -->
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <!-- 路由占位符,显示组件模板 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 组件
    const User = {
        通过props进行传参
        props:["id"],
        template: "<h1>{{id}}</h1>"
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            //通过props进行传参,true开启props
            { path: "/user/:id", component: User, props: true },
        ]
    })
    //创建Vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由实例对象
        router
    })
</script>

5.2.props为函数类型

    // 组件
    const User = {
        通过props进行传参
        props: ["id", "uname", "age"],
        template: "<h1>{{id}}---{{uname}}---{{age}}</h1>"
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            //通过props进行传参,props为函数类型时
            {
                path: "/user/:id",
                component: User,
                props: route => ({
                    id: route.params.id,
                    uname: "Tom",
                    age: 18
                })
            },
        ]
    })

6.路由命名

<body>
    <div id="app">
        <!-- 创建路由连接 -->
        <router-link to="/user/1">User1</router-link>
        <!-- :to绑定数据,使用命名好的路由,并通过params的对象传递数据 -->
        <router-link :to="{name:'user',params:{id:2}}">User2</router-link>
        <!-- 路由占位符,显示组件模板 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 组件
    const User = {
        通过props进行传参
        props: ["id", "uname", "age"],
        template: "<h1>{{id}}---{{uname}}---{{age}}</h1>"
    }
    //创建路由实例对象
    const router = new VueRouter({
        //设置路由的规则
        routes: [
            //通过props进行传参,props为函数类型时
            {
                //命名路由
                name: "user",
                path: "/user/:id",
                component: User,
                props: route => ({
                    id: route.params.id,
                    uname: "Tom",
                    age: 18
                })
            },
        ]
    })
    //创建Vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由实例对象
        router
    })
</script>