vue路由鉤子

時間 2019-11-12
原文原文鏈接
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script></head><body><!--https://segmentfault.com/a/1190000012552286--><div id="app">    <p>    <ul>        <li @click="gouZhi"><router-link to="/qz">意向</router-link></li>        <li @click="" ><router-link to="/jn">特長</router-link></li>        <li @click=""><router-link to="/gz">經驗</router-link></li>        <li><router-link to="/zw">評價</router-link></li>        <li> <router-link to="/jy">背景</router-link></li>    </ul>    </p>    <router-view></router-view>    <button>點擊獲取參數</button></div><template id="yiXiang">    <div>求職意向</div></template><template id="jiNeng">    <div>技能特長</div></template><template id="gongZuo">    <div>        <ul>            <li><router-link to="/gz/qzSon/234">雲貸通</router-link></li>            <li><router-link to="/gz/jnSon">有數簡查</router-link></li>            <li><router-link to="/gz/gzSon">最多跑一次</router-link></li>            <li><router-link to="/gz/zwSon">接口微服務</router-link></li>        </ul>        <router-view></router-view>    </div></template><template id="ziWo">    <div>自我評價</div></template><template id="jiaoYu">    <div>教育背景</div></template><!--路由子模塊--><template id="gongZuo1">    <div>《2323》</div></template><template id="gongZuo2">    <div>《2434》</div></template><template id="gongZuo3">    <div>《45454》</div></template><template id="gongZuo4">    <div>《6767676》</div></template><script>    const yiXiang = { template: '#yiXiang'};    const jiNeng = { template: '#jiNeng'};    const gongZuo = { template: '#gongZuo'};    const ziWo = { template: '#ziWo'};    const jiaoYu = { template: '#jiaoYu'};    const jiaoYuSon1 = { template: '#gongZuo1'};    const jiaoYuSon2 = { template: '#gongZuo2'};    const jiaoYuSon3 = { template: '#gongZuo3'};    const jiaoYuSon4 = { template: '#gongZuo4'};    const router = new VueRouter({        routes:[            {path:'',component:yiXiang},            {                path: '/qz/',                component: yiXiang,                beforeEnter: (to, from, next) => {console.log(1)},                beforeLeave: (to, from, next) => {},            },            { path: '/jn/', component: jiNeng,name:'jiNeng2'},            { path: '/gz', component: gongZuo,name:'gongZuo',                children: [                    { path: "/", component: jiaoYuSon1 },                    { path: "qzSon", component: jiaoYuSon1 },                    { path: "jnSon", component: jiaoYuSon2 },                    { path: "gzSon", component: jiaoYuSon3 },                    { path: "zwSon", component: jiaoYuSon4 }                ]            },            { path: '/zw', component: ziWo},            { path: '/jy', component: jiaoYu}        ]    });    router.beforeEach((to, from, next) => {  //全局路由用於判斷用戶登陸挺好的        console.log(1);        next();//可帶路徑參數跳轉到指定路徑    })    const app = new Vue({        methods:{            getFn:function () {},        },        router    }).$mount('#app');    //1 全局鉤子    //2 某個路由鉤子 寫在路由配置上    //3 某個組件鉤子 和method平級寫法</script></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。