15-基础-路由-vue-router-to 属性赋值

最新推荐文章于 2024-08-25 13:41:44 发布

weixin_30750335

最新推荐文章于 2024-08-25 13:41:44 发布

阅读量520

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/divtab/p/10940984.html

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 1.设置链接 -->
        <!-- to值 字符串 -->
        <router-link to="/home">主页</router-link>
        <!-- to值 变量 -->
        <router-link :to="top">热点</router-link>
        <!-- to值 可以是{path等} -->
        <router-link :to="{path:'/aboutus'}">关于我们</router-link>
        <!-- to值 可以是{name等} -->
        <router-link :to="{name:'aaa'}">AAA</router-link>
        <!-- to值 可以是{params:{参数名:值}} -->
        <!-- <router-link :to="{names:'bbb',params:{id:300}}">BBB</router-link> -->
        <router-link :to="{name:'bbb',params:{id:300}}">BBB</router-link>

        <!-- 2. 提供容器:将来渲染组件 -->
        <router-view></router-view>

    </div>
    <script src='./vue.js'></script>
    <script src="./vue-router.js"></script>
    <script>
        // 3. 提供要渲染的组件选项(对象)
        const Home = { template: `<div>首页组件</div>` };
        const Top = { template: `<div>热点组件</div>` };
        const Aboutus = { template: `<div>关于我们组件</div>` };
        const AAA = { template: `<div>AAA组件</div>` };
        // 显示当前的动态路由参数id的值
        const BBB = { template: `<div>BBB组件---{{$route.params.id}}</div>` };

        const routes = [
            { name: "home", path: '/', redirect: { name: 'abc' }, },
            { name: "abc", path: "/top", component: Home },
            { path: "/home", component: Home },
            { path: "/top", component: Top },
            { path: "/aboutus", component: Aboutus },
            { name: "aaa", path: "/aaa", component: AAA },
            { name: "bbb", path: "/bbb/:id", component: BBB }];
        // : to = "{name:'bbb',params:{userId:300}}"
        // 匹配的同时进行传值 传递的是userId的值是300

        // 4. 实例化路由对象
        const router = new VueRouter({ routes })
        // 路由选项 routes

        // 5. 配置路由:匹配当前的标识 渲染对应的组件
        // routes:[{}]
        // routes:routes
        new Vue({
            el: '#app',
            // 6. 挂载(使用)路由
            router,  // router:router
            data: { top: "/top" },
            methods: {}
        });
    </script>
</body>

</html>