Vue-review-router

2019-03-20 Vue PV:

最基本的一个路由展示域

在Vue控制域中写入router规定的标签
1. Go to Login //该项为路由的链接，默认为a标签
2. Go to Register//该项为路由的链接，默认为a标签
3. //该项为渲染路由组件的位置
以下步骤一般不能交换，因为存在相互依赖关系

创建组件模板

const login = {template:’<h1>这是一个登录框</h1>‘};

const register = {template:’<h1>这是一个注册框</h1>‘};

创建一个routes对象作为VueRouter的参数

     const routes = [
     {path:'/login',component:login},
     {path:'/register',component:register}
     ]

创建一个VueRouter实例，并将上面的routes作为参数，值得注意的是，这里的参数名字是routes，下面是使用ES6的写法简写对象名

const router = new VueRouter({
routes
})
创建Vue实例，值得注意的是，这之中的路由参数为router，下面是使用ES6的写法简写对象名
```
 const vm = new Vue({
     el:'#app',
     router
 })
```

路由重定向

需要添加的是,在创建routes对象时

        //创建一个routes对象
    const routes = [
        //这里是重要点，给需要添加默认路由的加路由加上redirect属性，其值为要转向的路由地址
        {path:'/',redirect:"/login"},
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]

子路由的使用

JavaScript：

<script>
//创建模板
const teacher = {template:"#teacher"};
const student = {template:"#student"}

const teacherName = {template:"<h1>这是老师的名字</h1>"}
const studentName = {template:"<h1>这是学生的名字</h1>"}
const teacherId = {template:"<h1>这是老师的序号</h1>"}
const studentId = {template:"<h1>这是学生的序号</h1>"}
//创建父级routes对象
routes = [
    {
        path:'/student',
        component:student,
        //注意这里子路由的申明的方式
        children:[
            {path:'name',component:studentName},
            {path:'id',component:studentId}
        ]
    },
    {
        path:'/teacher',
        component:teacher,
        children:[
            {path:'name',component:teacherName},
            {path:'id',component:teacherId}
        ]
        }
]

//创建VueRouter实例
const router = new VueRouter({
    routes
})

//创建Vue实例
const vm = new Vue({
    el:"#app",
    router
})
</script>

body

<div id="app">
        <router-link to="/student">student</router-link>
        <router-link to="/teacher">teacher</router-link>
        <router-view></router-view>
    </div>

    //注意这里在模板中申明子路由的link和view
    <template id="teacher">
        <div>
            <router-link to="/teacher/name">这是老师的名字 </router-link>
            <router-link to="/teacher/id">这是老师的id</router-link>
            <router-view></router-view>
        </div>
    </template>


    //注意这里在模板中申明子路由的link和view
    <template id="student">
        <div>
            <router-link to="/student/name">这是学生的名字 </router-link>
            <router-link to="/student/id">这是学生的id</router-link>
            <router-view></router-view>
        </div>
    </template>

带名视图

body

<div id="app">

        //注意下面的router-view中都是带有name属性的

        <h1>这里是默认视图</h1>
        <router-view name="stu" class="view"></router-view>

        <h1>这里只显示学生的视图</h1>
        <router-view name="stu" class="view"></router-view>

        <h1>这里只显示老师的视图</h1>
        <router-view name="tea" class="view"></router-view>
    </div>

<template id="default">
    <div>
        <h1>这是默认的展示页面</h1>
    </div>
</template>

<template id="stu">
    <div>
        <h1>这是学生的展示页面</h1>
    </div>
</template>

<template id="tea">
    <div>
        <h1>这是老师的展示页面</h1>
    </div>
</template>

js部分

 //创建模板
    const defaultView = {template:"#default"};
    const stuView = {template:"#stu"};
    const teaView = {template:"#tea"};

    //创建路由参数,这里是关键，component的value可以是一个对象，该对象的键值就是视图的名字和模板对应的名字
    const routes = [
        {
            path:"/",
            components:{
                default:defaultView,
                stu:stuView,
                tea:teaView
            }
        }
    ]

    //创建路由实例
    const router = new VueRouter({
        routes
    })

    //创建Vue实例
    const vm = new Vue({
        el:"#app",
        router
    })