Vue入门十一、路由的使用

最新推荐文章于 2023-09-05 20:17:37 发布

weixin_34346099

最新推荐文章于 2023-09-05 20:17:37 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/12012821/2404537

版权

一、vue-router使用

1、下载npm i vue-router -S
2、安装插件Vue.use(VueRouter)
3、创建路由对象
var router = new VueRouter()
4、配置路由规则
router.addRoutes([路由对象])
路由对象{path:'锚点', component:需要显示的组件}
5、将配置好的路由对象交给Vue
6、使用组件<router-view></router-view>

二、代码示例

方法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陆成功</div>
            `
    }
    // 安装路由
    Vue.use(VueRouter);

    // 创建路由
    var router = new VueRouter();

    // 配置路由规则
    router.addRoutes(
        [
            {path: '/login', component: Login}
        ]
    )

    // 使用路由组件
    new Vue({
            el: '#app',
            router,
            template: `
                <div>
                    <p>留坑使用路由组件</p>
                    <router-view></router-view>
</div>
            `
        }
    )

</script>
</body>
</html>

方法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陆成功</div>
            `
    }
    // 安装路由
    Vue.use(VueRouter);

    // 创建路由
    var router = new VueRouter({
            // 配置路由对象
            routes: [
                {path: '/login', component: Login}
            ]
        }
    );

    // 使用路由组件
    new Vue({
            el: '#app',
            router,
            template: `
                <div>
                    <p>留坑使用路由组件</p>
                    <router-view></router-view>
</div>
            `
        }
    )

</script>
</body>
</html>

转载于:https://blog.51cto.com/12012821/2404537

weixin_34346099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门十一、路由的使用

一、vue-router使用1、下载npm i vue-router -S2、安装插件Vue.use(VueRouter)3、创建路由对象var router = new VueRouter()4、配置路由规则router.addRoutes([路由对象])路由对象{path:'锚点', component:需要显示的组件}5、将配置好的路由对象交给Vue6、使用组件<router-vie...
复制链接

扫一扫