Vue路由的使用简单实例

Posted dilireba

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue路由的使用简单实例相关的知识,希望对你有一定的参考价值。

一、导入vue.js和vue.router.js,一定要先导入vue.js

二、代码

  

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div id="app">
            <router-link to="/menu1">第一句</router-link>
            <router-link to="/menu2">第二句</router-link>
            <router-link to="/menu3">第三句</router-link>
            <router-link to="/menu4">第四句</router-link>
            <!-- 路由出口 -->
            <router-view></router-view>
        </div>
        <template id="menu1">
            <h1>床前明月光</h1>
        </template>
        <template id="menu2">
            <h1>疑是地上霜</h1>
        </template>
        <template id="menu3">
            <h1>举头望明月</h1>
        </template>
        <template id="menu4">
            <h1>低头思故乡</h1>
        </template>
    </body>
    <script type="text/javascript">
        //1、定义路由组件
        const menu1={template:"#menu1"};
        const menu2={template:"#menu2"};
        const menu3={template:"#menu3"};
        const menu4={template:"#menu4"};
        //2、定义路由
        const routers=[
                        {path:"/menu1",component:menu1},
                        {path:"/menu2",component:menu2},
                        {path:"/menu3",component:menu3},
                        {path:"/menu4",component:menu4}
                        ];
        //3、创建router然后使用routers的配置
        const router=new VueRouter({
            routes:routers
        })
        //4、创建和挂载根实例
        var vue=new Vue({
            router
        }).$mount("#app");
    </script>

 

以上是关于Vue路由的使用简单实例的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

使用 vuex 和 vue 路由器的实例上未定义属性或方法“X”

Vue(十四):Router

Vue(十四):Router

vue.js路由参数简单实例讲解------简单易懂