Vue-Router 路由跳转方法

路由跳转方法

by logan70

HTML

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<div id="app">
  <h1>Vue-Router 路由跳转方法</h1>
  <button @click="$router.go(-1)">后退</button>
  <button @click="$router.go(1)">前进</button>
  <br>
  请输入路径<input type="text" v-model="path">
  <button @click="$router.push(path)">跳转（push）</button>
  <button @click="$router.replace(path)">替换（replace）</button>
  <p>
    <!-- 路由导航，to属性决定导航地址 -->
    <!-- router-link编译后默认渲染为a标签 -->
    <router-link to="/home">主页</router-link>
    <router-link to="/user">个人页</router-link>
  </p>
  <!-- 路由渲染出口 -->
  <router-view></router-view>
</div>

JavaScript

const Home = {template: '<div><p>主页（Home组件）</p></div>'}
const User = {template: '<div><p>个人页（User组件）</p></div>'}
const Error = {template: '<div><p>输入地址有误，页面不存在</p></div>'}

const router = new VueRouter({
  routes : [
    {
    	path: '/home',
      component: Home
    },
    {
    	path: '/',
      redirect: '/home'
    },
    {
    	path: '/user',
      component: User
    },
    {
    	path: '*',
      component: Error
    }
  ],
  
})


window.vueApp = new Vue({
  router,
  data() {
  	return {path: '/home'}
  },
  watch: {
  	$route (to, from) {
    	console.log(this.$router.history)
    }
  }
}).$mount('#app')