<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- 1.設置鏈接 -->
<!-- to值 字符串 -->
<router-link to="/home">主頁</router-link>
<!-- to值 變量 -->
<router-link :to="top">熱點</router-link>
<!-- to值 可以是{path等} -->
<router-link :to="{path:'/aboutus'}">關於我們</router-link>
<!-- to值 可以是{name等} -->
<router-link :to="{name:'aaa'}">AAA</router-link>
<!-- to值 可以是{params:{參數名:值}} -->
<!-- <router-link :to="{names:'bbb',params:{id:300}}">BBB</router-link> -->
<router-link :to="{name:'bbb',params:{id:300}}">BBB</router-link>
<!-- 2. 提供容器:將來渲染組件 -->
<router-view></router-view>
</div>
<script src='./vue.js'></script>
<script src="./vue-router.js"></script>
<script>
// 3. 提供要渲染的組件選項(對象)
const Home = { template: `<div>首頁組件</div>` };
const Top = { template: `<div>熱點組件</div>` };
const Aboutus = { template: `<div>關於我們組件</div>` };
const AAA = { template: `<div>AAA組件</div>` };
// 顯示當前的動態路由參數id的值
const BBB = { template: `<div>BBB組件---{{$route.params.id}}</div>` };
const routes = [
{ name: "home", path: '/', redirect: { name: 'abc' }, },
{ name: "abc", path: "/top", component: Home },
{ path: "/home", component: Home },
{ path: "/top", component: Top },
{ path: "/aboutus", component: Aboutus },
{ name: "aaa", path: "/aaa", component: AAA },
{ name: "bbb", path: "/bbb/:id", component: BBB }];
// : to = "{name:'bbb',params:{userId:300}}"
// 匹配的同時進行傳值 傳遞的是userId的值是300
// 4. 實例化路由對象
const router = new VueRouter({ routes })
// 路由選項 routes
// 5. 配置路由:匹配當前的標識 渲染對應的組件
// routes:[{}]
// routes:routes
new Vue({
el: '#app',
// 6. 掛載(使用)路由
router, // router:router
data: { top: "/top" },
methods: {}
});
</script>
</body>
</html>
