Vue——vue-cli 进行vue开发的脚手架工具

Vue全家桶：

　　（1）Vue基础

　　（2）VueRouter

　　（3）VueX

下面是一个路由示例：

<!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="../../inputfiles/vue.js"></script>
    <script src="../../inputfiles/vue-router.js"></script>
</head>
<body>
    <div id = 'app'>
        <!--路由入口-->
        <router-link to='/index'>首页</router-link>
        <router-link to='/home'>家园</router-link>

        <hr>
        <!--路由出口-->
        <router-view></router-view>
    </div>

    <script>
        const routes = [
            {
                path:'/index',
                component:{
                    template:`
                <div>
                    <h1>这是INDEX页面</h1>
                </div>
                `
                }
            },
            {
                path:'/home',
                component:{
                    template:`
                <div>
                    <h1>这是home页面</h1>
                </div>
                `
                }
            }
        ]
        const routerObject = new VueRouter({
            routes:routes
        })
        var vm = new Vue({
            el:'#app',
            data:{},
            router:routerObject
        })
    </script>
</body>
</html>

1. Vue全家桶
　　Vue + VueRouter + VueX
2. VueRouter https://router.vuejs.org/zh/
　　基本使用
　　1. 必须导入vue-router.js文件
　　2. 要有VueRouter()实例
　　3. 要把VueRouter实例挂载到Vue实例中

4. 路由的入口
　　<router-link to='/index'>index页面</router-link>
5. 路由的出口
　　<router-view></router-view>
2. 路由的参数
　　1. path: '/user/:name' --> 匹配路由
　　$route.params.name --> 取值

2. /user/alex?age=9000 --> url中携带参数
　　$route.query.age --> 取出url的参数

3. 子路由

children:[
{
path: '',
component: {
template: `...`
　　}
　　}
]

<router-link to='info' append></router-link>

路由的第二种定义方式：path 也可以写成：path = '/index/:name?age=10' name可以用来匹配视图中的<router-link to = '/index/zsq'>赵世奇</router-link>,同时也可以带参数

使用方法：template:`<div>user{{$router.params.name}}</div>`

参数使用方法：<p>{{$router.query.age}}</p> #取到age的值

定义子路由

注意不要忘记加上append这个参数

3. vue-cli 进行vue开发的脚手架工具

1. 安装vue-cli 工具
npm install vue-cli -g --> 全局安装

Vue——vue-cli 进行vue开发的脚手架工具

猜你喜欢