vue之路由

最新推荐文章于 2024-09-13 10:45:46 发布

无声的雾

最新推荐文章于 2024-09-13 10:45:46 发布

阅读量147

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/wb785074651/article/details/105875795

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用vue路由首先需要先引入vue-router.js，如何安装vue-router.js呢

打开terminal 执行npm install vue-router --save

安装以后可以看到多了一个vue-router文件夹，我们就可以引入vue-router.js了，注意，这个插件一定要引入在vue.js后面.

然后我们先定义一个组件，创建一个register.js

const registerForm = {
    template:`
    <div>
    <h1>注册页面</h1>
    <br/>
    用&ensp;户&ensp;名：<input type="text"/>
    <br/>
    密&emsp;&emsp;码：<input type="text"/>
    <br/>
    确认密码：<input type="text"/>
    <br/>
    <input type="button" value="提交"/>
    </div>
    `
}

然后在页面中引入这个js，同时定义路由，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <span><router-link to="/home">主页</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <router-view>

    </router-view>

</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="register.js"></script>
<script>
    const Home = { template: '<p>欢迎访问主页</p>' }
    const router = new VueRouter({
        routes: [
            {
                path: "/home",
                component: Home
            }, {
                path: "/register",
                component: registerForm
            }
        ]
    })

    const app = new Vue({
        el: "#app",
        components: {
            loginForm,
            registerForm
        },
        router
    })
</script>
</html>

这样的效果就是这样：