vue-router

最新推荐文章于 2023-06-17 00:14:34 发布

han_hanker

最新推荐文章于 2023-06-17 00:14:34 发布

阅读量133

点赞数

分类专栏： vue

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

转载于：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>