Vue 路由

目录

 

路由创建and配置 

 在页面上使用路由

router-link标签用于代替a标签，定义跳转超链接  

redirect

嵌套路由

路由传参

params传参

编程式的路由导航

---

路由创建and配置 

//router对象
var router = new VueRouter({
    routes:[
        {
            name:"login",//路由名称
            path:"/login",//路由路径
            component:loginForm//要路由到的组件
        },
    ]
});
const vm = new Vue({
    el:"#app",
    //router:router //如果路由对象名也叫router，则可以省略:router
    router
})

 在页面上使用路由

<div id="app">
    <!-- 超链接的href必须以#开头 -->
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <hr>
    <!-- router-view是路由的锚点，也就是路由到的组件显示的地方 -->
    <router-view></router-view>
</div>

router-link标签用于代替a标签，定义跳转超链接  

<div id="app">
    <!-- 超链接的href必须以#开头 -->
    <!--<a href="#/login">登录</a>
    <a href="#/register">注册</a>-->
    <!-- to属性配置跳转路径，不用添加#前缀 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>
    <!-- router-view是路由的锚点，也就是路由到的组件显示的地方 -->
    <router-view></router-view>
</div>

redirect

redirect属性用在路由上，比如在a路由上配置redirect:b路由的路径，当访问a时会自动重定向到b。通常用于配置页面的默认路由地址

var router = new VueRouter({
    routes:[
        {name:"default",path:"/",redirect:"/login"},
        {
            name:"login",//路由名称
            path:"/login",//路由路径
            component:loginForm//要路由到的组件
        },
        {name:"register",path:"/register",component:registerForm}
    ]
});

嵌套路由

const router = new VueRouter({
    routes:[
        {
            name:"xxx",//路由名称
            path:"/组件路径",
            component:父组件对象,
            children:[//设置子路由信息
                {
                    name:"xxx",//路由名称
                    path:"子组件路径",
                    component:子组件
                }
            ]
        }
    ]
})

路由传参

<div id="app">
    <router-link to="/user?name=李栓蛋&age=38">用户管理</router-link>
    <router-link :to="{path:'/user',query:{name:'王花花',age:28}}">用户管理</router-link>
    <router-view></router-view>
</div>
<script>
    const user = {
        template:`<div>
                    <div>我叫{{$route.query.name}}</div>
                    <div>今年{{$route.query.age}}</div>
                </div>`
    }

    const router = new VueRouter({
        routes:[
            {path:"/user",component:user}
        ]
    })

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

params传参

<div id="app">
     <router-link to="/product/macbookair">商品1</router-link>
     <router-link :to="{name:'product',params:{name:'macbookpro'}}">商品2</router-link>		<router-view></router-view>
</div>
<script>	
    const product = {
        template:`<div>
					<div>商品名：{{$route.params.name}}</div>  
                </div>`
    }
	//通过:参数名的方式匹配数据
    const router = new VueRouter({
        routes:[
            {name:"product",path:"/product/:name",component:product}
        ]
    })

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

编程式的路由导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

语法：router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

声明式	编程式
<router-link :to="...">	router.push(...)

// 字符串
router.push('/login')

// 对象
router.push({ path: '/login' })

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})