vue-router

来源：互联网发布：java 反射私有属性编辑：程序博客网时间：2024/06/15 05:38

转载于：https://segmentfault.com/a/1190000007825106#articleHeader6

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->    <script type="text/javascript" src="../vue/vue.min.js"></script>    <script type="text/javascript" src="../vue/vue-router.min.js"></script>    <script type="text/javascript" src="../vue/babel.min.js"></script></head><body style="padding:30px">    <div id="box">        <div class="content">            <router-link to="/goods">商品</router-link>            <router-link to="/ratings">评论</router-link>            <router-link to="/seller">商家</router-link>        </div>        <router-view></router-view>    </div></body></html><script>//定义组件const goods = { template: '<p>goods</p>' };const ratings = { template: '<p>ratings</p>' };const seller = { template: '<p>seller</p>' };// 定义路由(routes)，components还可以是Vue.extend()创建的const routes = [    // 重定向    { path: '/', redirect: { name: 'goods' }},    { path: '/goods', component: goods, name: 'goods' },    { path: '/ratings', component: ratings, name: 'ratings' },    { path: '/seller', component: seller, name: 'seller' }];//创建路由实例const router = new VueRouter({    // ES6缩写语法，相当于routes:routes    routes});//设置afterEach钩子函数router.afterEach((to, from, next) => {    console.log(to);    console.log(from);    console.log(next);    document.title = to.name;})// 最后创建vue实例并挂载const app = new Vue({    el: '#box',    router});// 导航式编程// router.push('/goods');</script>

阅读全文

0 0