Vue当中的$route 和 $router的区别

$router 为 VueRouter,实例，想要导航到不同URL，则使用$router.push方法。
$route 为当前router 跳转对象里面可以获取 name.path.query.params等。

做个简单的Demo来确认下。

$route 为当前router 跳转对象里面可以获取 name.path.query.params等。

<div id="app">
    <div class="menu">
        <div class="container">
            <router-link to="/course">课程</router-link>

　　　　</div> 
　　</div>
 <div class="container"> 
　　　　<router-view></router-view> 
</div> 
</div>

 const Course = {
        data: function () {
            return {
                courseList: []
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.courseList = res.data.data.result;
            })

        },
        mounted: function () {
            /* DOM对象已在页面上生成，此时就可以 */
        },
        template: `
            <div class="course-list">

                <div class="item" v-for="item in courseList">
                    <router-link :to="{name:'Detail',params:{id:item.id}}">
                        <img :src="item.cover" alt="">
                        <a>{{item.name}}</a>
                     </router-link>
                </div>
            </div>`
    }
const Detail = {
        data: function () {
            return {
                title: "详细页面",
                courseId: null,
                hotCourseList: [
                    {id: 1000, title: "python全栈开发"},
                    {id: 2000, title: "异步编程"},
                ],
            }
        },
        created: function () {
            this.courseId = this.$route.params.id;          
            // 此处可以根据课程ID，发送ajax请求获取课程详细信息
            this.getCourseDetail();
        },
        watch: {
            $route: function (to, from) {
                this.courseId = to.params.id;
                this.getCourseDetail();
            }
        },
        methods: {
            getCourseDetail: function () {
                // 根据this.courseId获取课程详细信息
            }
        },
        template: `
                <div>
                    <h2>课程详细页面</h2>
                    <div>当前课程ID为：{{courseId}}</div>
                    <h3>课程推荐</h3>
                    <ul>
                        <li v-for="item in hotCourseList">
                            <router-link :to="{name:'Detail', params:{id:item.id}}">{{item.title}}</router-link>
                        </li>
                    </ul>
                </div>`
    }
const router = new VueRouter({
        routes: [
            {path: '/', component: Home},
            {path: '/home', component: Home},
            {path: '/course', component: Course},
            {path: '/detail:id', component: Detail, name: 'Detail'},  
        ],
    })

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    })

　　上述中就是通过$route.params.id  来获取动态参数。

 

$router 为 VueRouter,实例，想要导航到不同URL，则使用$router.push方法。

<div id="app">
    <router-view></router-view>
</div>

<script>
const Index = {template: '<h3>这是个首页呀...</h3>'}
const Login = {
        data: function () {
            return {
                user: '',
                pwd: ''
            }
        },
        methods: {
            doLogin: function () {
                if (this.user.length > 0 && this.pwd.length > 0) {
                    this.$router.push({name: 'Index'});
                    // this.$router.replace({name: 'Task'});
                }
            }
        },
        template: `
            <div style="width: 500px;margin: 100px auto">
                <input type="text" placeholder="用户名" v-model="user"/>
                <input type="text" placeholder="密码" v-model="pwd" />
                <input type="button" value="提 交"  @click="doLogin" />
            </div>
         `
    };

const router = new VueRouter({
        routes: [
            {
                path: '/',
                // component: Home,
                redirect: '/login'     // 表示直接跳转到/login  这个url
            },
            {path: '/login', component: Login, name: 'Login'},
                ],
            },
        ]
    })

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    })

　　上述中 this.$router.push({name: 'Index'}) 表示跳转到别名为Index的url。