Vue Router的认识（1）

1、router-link

我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

 <nav>	  
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>|
	<router-link to="/user">用户中心</router-link>|
	<router-link to="/produce/abc">产品abc</router-link>|
	<router-link to="/produce/123">产品123</router-link>|
  </nav>

2、router-view

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

3、路由配置

router/index.js

        {

                path:"/about",

                name:"About",

                component:"About"

        }

4、路由传参    

//引入文件
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
  }
]

<template>
	<p>我是产品页面</p>
	<p>{{$route.params.id}}</p>
</template>

5、编程路由跳转

        $router

<template>
	<h2>通过js方式跳转页面</h2>
	<button @click="$router.back()">返回</button>
	<button @click="$router.go(-1)">返回</button>
	<button @click="$router.forward()">前进</button>
	<button @click="$router.go(1)">前进</button>
	<hr>
	<button @click="$router.push('/about')">关于</button>
	<button @click="$router.replace('/about')">关于-不留历史记录：替换</button>
</template>