<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
? ? <!--1.安裝vue-router路由模塊-->
? ? <script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
? ? <style>
? ? ? ? .router-link-active{
? ? ? ? ? ? color:red;
? ? ? ? ? ? font-weight:bold;
? ? ? ? }
? ? ? ? .myactive{
? ? ? ? ? ? color:blue;
? ? ? ? ? ? font-size:30px;
? ? ? ? }
? ? ? ? .v-enter,
? ? ? ? .v-leave-to{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? transform:translateX(140px);
? ? ? ? }
? ? ? ? .v-enter-active,
? ? ? ? .v-leave-active{
? ? ? ? ? transition:all 0.5s ease;
? ? ? ? }
? ? </style>
</head>
<div id="app">
? ? <p>{{message}}</p>
? ? <!--<a href="#/login">登錄</a>-->
? ? <!--<a href="#/register">注冊</a>-->
? ? <!--router-link默認(rèn)渲染為一個a標(biāo)簽，加了tag="span"之后，則會渲染為一個span標(biāo)簽-->
? ? <router-link to="/login" tag="span">登錄</router-link>
? ? <router-link to="/register">注冊</router-link>
? ? <!--這是vue-router提供的元素，專門用來當(dāng)做占位符的，將來路由規(guī)則匹配到的組件，就會展示到這個touter-view中去，所以我們可以吧router-view認(rèn)為是一個占位符-->
? <transition mode="out-in">
? ? ? <router-view></router-view>
? </transition>
</div>
</body>
<script>
? ? let login={
? ? ? ? template:'<h1>登陸組件</h1>'
? ? }
? ? let register={
? ? ? ? template:'<h1>注冊組件</h1>'
? ? }
? ? //2.創(chuàng)建一個路由對象，當(dāng)導(dǎo)入vue-router包之后，在window全局對象中，就有了一個路由的構(gòu)造函數(shù)，叫做VueRouter
? ? //在new路由對象的時候，可以為構(gòu)造函數(shù)傳遞一個配置對象
? ? let routerObj=new VueRouter({
? ? ? ? // route? 這個配置對象中的route表示路由匹配規(guī)則的意思
? ? ? ? routes:[//路由匹配規(guī)則
? ? ? ? ? ? //每個路由規(guī)則都是一個對象，這個規(guī)則對象身上有兩個必須的屬性
? ? ? ? ? ? //屬性1是path，表示監(jiān)聽那個路由連接的地址
? ? ? ? ? ? //屬性2是component，表示如果路由是前面匹配到的path，則展示component屬性對應(yīng)的那個組件
? ? ? ? ? ? //注意：component的屬性值，必須是一個組件的模板對象，不能是組件的引用名稱；
? ? ? ? ? ? {path:"/",redirect:'/login'},//這里的redirect和Node中的redirect完全是兩碼事
? ? ? ? ? ? {path:'/login',component:login},
? ? ? ? ? ? {path:'/register',component:register}
? ? ? ? ],
? ? ? ? linkActiveClass:'myactive'
? ? });
? ? let app=new Vue({
? ? ? ? el:'#app',
? ? ? ? data:{
? ? ? ? ? ? message:'Hello World'
? ? ? ? },
? ? ? ? router:routerObj//將路由規(guī)則對象注冊到vm實例上，用來監(jiān)聽URL地址變化，用來展示對應(yīng)的組件
? ? })
</script>
</html>
