路由跳转Vue Router

1router-link
(页面跳转)

<template>
    <div id="main">
        <router-view class="views has-tabs" />
        <div class="tabs">
            <router-link class="links ihome" to="/"> home </router-link>
            <router-link class="links icate" to="/category"> cate </router-link>
            <router-link class="links iball" to="/ball"> ball </router-link>r
            <router-link class="links icart" to="/cart"> cart </router-link>
            <router-link class="links iuser" to="/user"> user </router-link>
        </div>
    </div>
</template>

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

2 路由配置

<router-link to="/about">

{
   path:"/about",
   name:"About",
   component:"About"
}

 3 路由传参

//引入文件
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'
//定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/produce/:id',
    name: 'produce',
    component: Produce
  }
]

 4 编程路由跳转

<template>
    <div>我是产品页面</div>
    <p>{{$route.params.id}}</p>
    <h3>通过js方式跳转页面</h3>
    <button @click="$router.back()">返回</button>
    <button @click="$router.go(-1)">返回</button>
    <button @click="$router.forward()">前进</button>
    <button @click="$router.go(1)">前进</button>
    <br />
    <button @click="$router.push('/about')">关于</button>
    <button @click="$router.replace('/about')">关于-不留历史记录</button>
</template>