vue 七 vue基础

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     // 要加 s，没有r了  一下固定格式，记住就好
     routes: [
     {path:'/', component:home},
     {path:'/first', component:first},
     {path:'/second', component:second},
     ]
 })
 // 写模板
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            <url>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <li><router-link to='/second'>second</router-link></li>
            </ul>
            // 指定显示到哪
            <router-view class='xxx'></router-link>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)

// 定义模板
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 // 定义子模版
 const firstFirst = { template: '<div>firstFirst内容</div>' }
 const firstSecond = { template: '<div>firstSecond内容</div>' }

 // 定义子模板视图显示
 const asdf = {
     template:`
             <div class='sadfj'>
             <h2>组件</h2>
             <router-view class='sadfj'></router-view>
             </div>`
     }

// 定义路由
 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     // 要加 s，没有r了  一下固定格式，记住就好
     routes: [
         {path:'/', component:home},
         // 调用子视图的模板
         {path:'/first', component:asdf,
             // 数组形式
             children:[
                 {path:'/', component:first},
                 {path:'first', component:firstFirst},
                 {path:'second', component:firstSecond},
             ]
         },
         {path:'/second', component:second},
         ]
    })
 // 写模板视图和子模板视图
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    <li><router-link to='/first/first'>first</router-link></li>
                    <li><router-link to='/first/second'>second</router-link></li>
                </ol>
                <li><router-link to='/second'>second</router-link></li>
            </ol>
            // 指定显示到哪
            <router-view class='sadfj'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
// 本节讲如何通过路由传递参数到模板里
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)

// 定义模板
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 // router路由   route路线
 const firstFirst = { template: '<div>firstFirst内容{{ $route.params.id }}</div>' }
 const firstSecond = { template: '<div>firstSecond内容{{ $route.params.id }}</div>' }

 // 定义子模板视图显示
 const asdf = {
     template:`
             <div class='sadfj'>
             <h2>组件</h2>
             <router-view class='sadfj'></router-view>
             </div>`
     }

// 定义路由
 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     // 在路径后加name
     routes: [
         {path:'/', name:'home', component:home},
         {path:'/first', component:asdf,
             // 如果有子菜单父级就不用写name，只给子级写就可以
             children:[
                 {path:'/', name:'home_first', component:first},
                 {path:'first', name:'home_first_First', component:firstFirst},
                 {path:'second', name:'home_first_Second', component:firstSecond},
             ]
         },
         {path:'/second', name:'home_second', component:second},
         ]
    })
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            // 模板形式获取name
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    // vue.js 中如果绑定参数传值都是json的格式，这里绑定to且值换成json
                    <li><router-link :to='{name:"home_first_First",params:{id:123}}'>first</router-link></li>
                    <li><router-link :to='{name:"home_first_Second",params:{id:321}}'>second</router-link></li>
                </ol>
                <li><router-link to='/second'>second</router-link></li>
            </ol>
            // 指定显示到哪
            <router-view class='sadfj'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
// 把模板做成组件
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }
 const hehe = { template: '<div>home内容</div>' }

 const router = new VueRouter({
     mode: 'history',
     base: __dirname,
     routes: [
         // component后面是json的格式
         // component后面如果东西多用复数
         {path:'/', components:{
             default:home,
             left: first,
             right: second,
         }},
         {path:'/first', components:{
             default:hehe,
             left: first,
             right: second,
         }},
         ]
    })
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                
            </ol>
            // 定义三个模板
            <router-view class='sadfj'></router-view>
            <router-view class='sadfj' name='left' style='float:left;width:50%;background-color:#ff6600;height:300px'></router-view>
            <router-view class='sadfj' name='right' style='float:left;width:50%;background-color:#fff600;height:300px'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
// url的传值 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 声明一个路由表
 const router = new VueRouter({
     mode: 'history',
     base: __dirname,
     // 数组
     routes:[
         {path:'/'},
         {path:'/params/:aaa/:bbb'},
         // 正则
         {path:'/parame-regex/:id(\\d+'}]
 })
// 模板
 new Vue({
     router,
     // 要有个根元素
     template:`
         <div>
             <h1>good mornging</h1>
             <ul>
                 <li><router-link to='/'>/</router-link></li>
                 <li><router-link to='/params/111/222'>/params/111/222</router-link></li>
                 <li><router-link to='/parame-regex/222'>/parame-regex/222</router-link></li>
             </ul>
             <p>Show</p>
             模板显示过来，pre显示源码
             <pre><code>
             {{ $route.params.aaa }}
             {{ JSON.stringify($route,null,2)}}
             </code></pre>
         </div>`
 }).$mount('#app')

// import Vue from 'vue'
// import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

// Vue.use(Router)

// export default new Router({
//   routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   ]
// })
// url的传值 
import Vue from 'vue'
import VueRouter from 'vue-router'
// 如果用到params就用name---用于路由值不确定的情况下
// 如果用query就用路径---用于路由值确定的情况下
Vue.use(VueRouter)

const users = {
     template:`
             <div>
             <h2>Users</h2>
             <router-view></router-view>
             </div>`
     }

const user = {
    // query的传值
     template:`
             <div>
                 {{$route.params.username}}
                 {{$route.query.aaa}}
             </div>`
     }

const home = {template:`<div><h2>hmoe</h2></div>`}
const router = new VueRouter({
     mode: 'history',
     base: __dirname,
     routes:[
         {path:'/', name:'home', component:home},
         {path:'/users', component:users,
             children:[
                 {path:':username', name:'user', component:user},
             ]
         }
         ]
    })

new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    <li>
                    <router-link :to="{path:'/users/wos',query:{aaa:'bbb12345'}}">
                        wos
                    </router-link>
                    </li>
                    
                </ol>
               <router-link tag='li' to='about'>
                    link
                    <router-link>
            </ol>
            <router-view></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

格式：MVVM  M---model  V---view  VM---template
参数传值需要绑定，使用上一级东西需要绑定，寻找跟自己一样的旧不用绑定了
// 本节讲如何通过路由传递参数到模板里
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)

// 定义模板
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 // router路由   route路线
 const firstFirst = { template: '<div>firstFirst内容{{ $route.params.id }}</div>' }
 const firstSecond = { template: '<div>firstSecond内容{{ $route.params.id }}</div>' }

 // 定义子模板视图显示
 const asdf = {
     template:`
             <div class='sadfj'>
             <h2>组件</h2>
             <router-view class='sadfj'></router-view>
             </div>`
     }

// 定义路由
 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     routes: [
         {path:'/', name:'home', component:home},
         {path:'/first', component:asdf,
             // 父级必须要用绝对路径，子级可以用相对路径
             children:[
                 {path:'/', name:'home_first', component:first},
                 {path:'first', name:'home_first_First', component:firstFirst},
                 {path:'second', name:'home_first_Second', component:firstSecond},
                 // redirect路由重定性
                 {path:'third', redirect:'first'},
             ]
         },
         {path:'/second', name:'home_second', component:second},
         {path:'/aaa/:id', component:firstFirst},
         {path:'/bbb/:id', redirect:'/aaa/:id'},
         {
            path:'/ccc/:id',
            // redirect后可以以函数的方式
            redirect:xxxx => {
                const { hash,params,query } = xxxx;
                if (params.id == '789'){
                    return '/'
                }
            }
         }
         ]
    })
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            // 模板形式获取name
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    // vue.js 中如果绑定参数传值都是json的格式，这里绑定to且值换成json
                    <li><router-link :to='{name:"home_first_First",params:{id:123}}'>first</router-link></li>
                    <li><router-link :to='{name:"home_first_Second",params:{id:321}}'>second</router-link></li>
                    <li><router-link to='third'>third</router-link></li>
                </ol>
                <li><router-link to='/second'>second</router-link></li>
                <li><router-link to='/aaa/123'>aaa</router-link></li>
                <li><router-link to='/bbb/456'>bbb</router-link></li>
                <li><router-link to='/ccc/789'>ccc</router-link></li>
            </ol>
            // 指定显示到哪
            <router-view class='sadfj'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中

// 本节讲相对于模板的别名
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)

// 定义模板
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 // router路由   route路线
 const firstFirst = { template: '<div>firstFirst内容{{ $route.params.id }}</div>' }
 const firstSecond = { template: '<div>firstSecond内容{{ $route.params.id }}</div>' }

 // 定义子模板视图显示
 const asdf = {
     template:`
             <div class='sadfj'>
             <h2>组件</h2>
             <router-view class='sadfj'></router-view>
             </div>`
     }

// 定义路由
 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     routes: [
         {path:'/', name:'home', component:home},
         {path:'/first', component:asdf,
             // 父级必须要用绝对路径，子级可以用相对路径
             children:[
                 {path:'/', name:'home_first', component:first},
                 {path:'first', name:'home_first_First', component:firstFirst,alias:'/gogo'},
                 {path:'second', name:'home_first_Second', component:firstSecond},
                 // redirect路由重定性
                 {path:'third', redirect:'first'},
             ]
         },
         {path:'/second', name:'home_second', component:second},
         {path:'/aaa/:id', component:firstFirst},
         {path:'/bbb/:id', redirect:'/aaa/:id'},
         {
            path:'/ccc/:id',
            // redirect后可以以函数的方式
            redirect:xxxx => {
                const { hash,params,query } = xxxx;
                if (params.id == '789'){
                    return '/'
                }
            }
         }
         ]
    })
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            // 模板形式获取name
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    // vue.js 中如果绑定参数传值都是json的格式，这里绑定to且值换成json
                    <li><router-link :to='{name:"home_first_First",params:{id:123}}'>first</router-link></li>
                    <li><router-link :to='{name:"home_first_Second",params:{id:321}}'>second</router-link></li>
                    <li><router-link to='third'>third</router-link></li>
                </ol>
                <li><router-link to='/second'>second</router-link></li>
                <li><router-link to='/aaa/123'>aaa</router-link></li>
                <li><router-link to='/bbb/456'>bbb</router-link></li>
                <li><router-link to='/ccc/789'>ccc</router-link></li>
                <li><router-link to='/gogo'>gogo</router-link></li>
            </ol>
            // 指定显示到哪
            <router-view class='sadfj'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.h

// 本节讲相对于模板的别名
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配路由
Vue.use(VueRouter)

// 定义模板
 const first = { template: '<div>first内容</div>' }
 const second = { template: '<div>second内容</div>' }
 const home = { template: '<div>home内容</div>' }

 // router路由   route路线
 const firstFirst = { template: '<div>firstFirst内容{{ $route.params.id }}</div>' }
 const firstSecond = { template: '<div>firstSecond内容{{ $route.params.id }}</div>' }

 // 定义子模板视图显示
 const asdf = {
     template:`
             <div class='sadfj'>
             <h2>组件</h2>
             <router-view class='sadfj'></router-view>
             </div>`
     }

// 定义路由
 const router = new VueRouter({
     //可以去掉路由中的#
     mode: 'history',
     //当前路径
     base: __dirname,
     routes: [
         {path:'/', name:'home', component:home},
         {path:'/first', component:asdf,
             // 父级必须要用绝对路径，子级可以用相对路径
             children:[
                 {path:'/', name:'home_first', component:first},
                 // 起别名也可以以数组的形式来起多个名字 ['/goo','/haha']
                 {path:'first', name:'home_first_First', component:firstFirst,alias:'/gogo'},
                 {path:'second', name:'home_first_Second', component:firstSecond},
                 // redirect路由重定性
                 {path:'third', redirect:'first'},
             ]
         },
         {path:'/second', name:'home_second', component:second},
         {path:'/aaa/:id', component:firstFirst},
         {path:'/bbb/:id', redirect:'/aaa/:id'},
         {
            path:'/ccc/:id',
            // redirect后可以以函数的方式
            redirect:xxxx => {
                const { hash,params,query } = xxxx;
                if (params.id == '789'){
                    return '/'
                }
            }
         }
         ]
    })
new Vue({
    router,
    template:`
        <div id='r'>
            <h1>导航</h1>
            // 模板形式获取name
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to='/'>/</router-link></li>
                <li><router-link to='/first'>first</router-link></li>
                <ol>
                    // vue.js 中如果绑定参数传值都是json的格式，这里绑定to且值换成json
                    <li><router-link :to='{name:"home_first_First",params:{id:123}}'>first</router-link></li>
                    <li><router-link :to='{name:"home_first_Second",params:{id:321}}'>second</router-link></li>
                    <li><router-link to='third'>third</router-link></li>
                </ol>
                <li><router-link to='/second'>second</router-link></li>
                <li><router-link to='/aaa/123'>aaa</router-link></li>
                <li><router-link to='/bbb/456'>bbb</router-link></li>
                <li><router-link to='/ccc/789'>ccc</router-link></li>
                <li><router-link to='/gogo'>gogo</router-link></li>
            </ol>
            // 指定显示到哪
            <router-view class='sadfj'></router-view>
        </div>
        `
}).$mount('#app') //把模板安装到index.html中