vue路由 / router-link

router-link

普通路由、指向path地址
<router-link to:"/xxx"></router-link>

命名路由
1、在路由配置routes[]中增加name属性
2、在router-link中绑定属性 :to="{name:‘xxx’}"
<router-link to="{name:'xxx'}"></router-link>

router-link router-view 是在安装插件Vue.use()时产生的内置组件

简单demo

<!DOCTYPE html>
<html lang="en">
<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>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <!-- 1、引入vue-router -->
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var Login = {
            template:`<div>登录界面</div>`
        }
        var Register = {
            template:`<div>注册界面</div>`
        }
        // 安装插件
        Vue.use(VueRouter);
        // 创建一个路由对象
        var Router = new VueRouter({
            // 配置路由规则
            routes:[
                // 路由对象有了名称就等于有了变量名，router-link只需要说明这个变量名即可
                {name:"login", path:"/login", component:Login},
                {name:"register",path:"/register", component:Register}
            ]
        })

        var App = {
            // 使用path
            // template:`<div>
            //     <!--内置组件-->
            //     <router-link to='/login'>登录去</router-link>
            //     <router-link to='/register'>注册去</router-link>
            //        <router-view></router-view>
            //     </div>`

            // 使用name
            template:`<div>
                    <!--内置组件,要加：相当于绑定一个属性，避免被做为字符串解析-->
                    <router-link :to="{name:'login'}">登录去</router-link>
                    <router-link :to="{name:'login'}">登录去</router-link>
                    <router-link :to="{name:'login'}">登录去</router-link>
                    <router-link :to="{name:'login'}">登录去</router-link>
                    <router-link :to="{name:'register'}">注册去</router-link>
                   <router-view></router-view>
                </div>`
        }

        new Vue({
            el:"#app",
            // 使用路由
            router:Router,
            components:{
                app:App
            },
            template:`
             <app/>
            `
        })
    </script>
</body>
</html>

来源：CSDN

作者：kingsha.

链接：https://blog.csdn.net/sinat_41904410/article/details/104048795

标签

vue

路由

vue路由