操作方法

页面结构

<body>
    <div id="app">
        <h1>操作方法</h1>

        <!-- 路由渲染组件 -->
        <router-view></router-view>

        <br />

        <button @click="demo1">按钮跳转首页</button>
        <button @click="demo2">按钮跳转会员中心</button>
        <button @click="demo3">刷新界面</button>
    </div>
</body>

<script src="./vue.min.js"></script>
<!--要引入路由组件-->
<script src="./vue-router.js"></script>

逻辑结构

const Home = {
    template: `<h1>首页</h1>`
}

const User = {
    template: `<h1>会员中心</h1>`
}

//创建路由对象
const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home,
        },
        {
            path: '/user',
            component: User,
        },
    ]
})

//在全局中加载路由
var app = new Vue({
    el:'#app',
    router,
    methods:{
        demo1()
        {
            this.$router.push('/')
        },
        demo2()
        {
            //普通跳转
            // this.$router.push('/user')

            //带params参数跳转
            // this.$router.push({name: '/user', params:{id:'参数值'}})

            //带query参数跳转
            this.$router.push({path: '/user', query:{keyword:'参数值'}})
        },
        demo3()
        {
            //刷新当前界面
            this.$router.go(0)

            //后退
            // this.$router.go(-1)

            // 前进
            // this.$router.go(1)
        }
    }
})