<div id="app">
  <h1>Hello App!</h1>
  <p>
  <!-- 使用 router-link 組件來導(dǎo)航. -->
  <!-- 通過傳入 `to` 屬性指定鏈接. -->
  <!-- <router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
 </div>

<!-- 字符串 -->
<router-link to="home">Home</router-link>
 
<!-- 渲染結(jié)果同上  使用 v-bind 的 JS 表達(dá)式 -->
<router-link v-bind:to="'home'">Home</router-link>
 
<!-- 渲染結(jié)果同上  不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>
 
<!-- 渲染結(jié)果同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
 
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 此時(shí)路由如下定義，name也可為中文
const routes = [
 { path: '/user', component: user, name: 'user' }
];
 
<!-- 帶查詢參數(shù)，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<router-link to="goods" replace></router-link>

<!-- 渲染成li標(biāo)簽 -->
<router-link to="goods" tag="li"></router-link>

<!-- 改變r(jià)outer-link的active時(shí)的classname -->
<router-link to="goods" active-class="router-active'></router-link>