路由vue-router

1）是vue的一个核心插件

2）可以根据不同的url访问不同的页面（进行不同页面的跳转）

3）创建单页面应用[又叫做SPA（SINGLE PAGE APP LICATION）应用]

简单路由

<div class="box">
            <router-link to="/home">首页</router-link>
            <router-link to="/bag">用户页</router-link>
            <router-view></router-view>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var Home={
                template:`
                    <h1>欢迎来到我的网站</h1>
                `
            }
            var Bag={
                template:`
                    <h1>进入用户页面</h1>
                `
            }
            const routes=[
                {path:"/",compontent:Home},
                {path:"/home",component:Home},
                {path:"/bag",component:Bag}
            ]
            const router=new VueRouter({
                routes:routes
            })
            
            new Vue({
                el:".box",
                router:router
            })
        </script>

当点击是字体点颜色

``css
               <style>
            /*.active{
                color:orange;
            }*/
            .router-link-active{
                color: orange;
            }
        </style>
``html
               <div class="box">
            <router-link to="/home">首页</router-link>
            <router-link to="/bag">用户页</router-link>
            <router-view></router-view>
        </div>
``js
                <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var Home={
                template:`
                    <h1>欢迎来到我的网站</h1>
                `
            }
            var Bag={
                template:`
                    <h1>进入用户页面</h1>
                `
            }
            const routes=[
                {path:"/",compontent:Home},
                {path:"/home",component:Home},
                {path:"/bag",component:Bag}
            ]
            const router=new VueRouter({
                routes:routes,
                /*linkActiveClass:"active"*/
            })
            
            new Vue({
                el:".box",
                router:router
            })
        </script>

路由的嵌套

<div class="box">
            <router-link to="/home">首页</router-link>
            <router-link to="/bag">用户页</router-link>
            <router-view></router-view>
            
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var home={
                template:`
                    <h1>欢迎来到我的网站</h1>
                `
            }
            var bag={
                template:`
                   <div>
                        <h1>欢迎来到我的用户页</h1>
                        <ul>
                            <li>
                                <router-link to="/bag/zhu">注册</router-link>
                            </li>
                            <li>
                                <router-link to="/bag/deng">登录</router-link>
                            </li>
                        </ul>
                        <router-view></router-view>
                    </div> 
                `
            }
            var zhu={
                template:`
                    <h1>欢迎来到我的注册</h1>
                `
            }
            var deng={
                template:`
                    <h1>欢迎来到我的登录</h1>
                `
            }
            const routes=[
                {path:'/',component:home},
                {path:"/home",component:home},
                {
                    path:"/bag",
                    component:bag,
                    children:[
                        {path:"zhu",component:zhu},
                        {path:"deng",component:deng}
                    ]
                }
            ]
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:".box",
                router:router
            })
        </script>

不常用的五个标签

v-html 可以识别标签
v-text 不识别标签按文本输入
v-once 只绑定第一次
v-pre 原样输出不对数据进行解译
v-clock 数据没有完全加载之前 加载完v-clock就消失了

<div class="box">
            <input type="text" v-model="msg" />
            <p v-html="msg">{{msg}}</p>
            <h2 v-text="msg">{{msg}}</h2>
            <h4 v-once>{{msg}}</h4>
            <h6 v-pre>{{msg}}</h6>
            <h5 v-cloak>{{msg}}</h5>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            new Vue({
                el:".box",
                data:{
                    msg:'hello'
                },
                beforeMount:function(){ 
                  alert('beforeMount')
                }
            })
        </script>