Vue路由1

Vue Router的使用步骤(★★★)

A.导入

1. 下载

 npm i vue-router --save或者 npm i vue-router --S

2. 在main.js入口文件中引入

 import Vue from "vue"
 import VueRouter from "vue-router"//引入路由工具
 import App from "./App.vue"

3. 在main.js入口文件中注入路由

Vue.use(VueRouter）//就是运行路由的相关函数和给vue绑定东西:比如$router

5. 在main.js入口文件中配置路由规则并创建路由实例

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

6. 将路由挂载到Vue实例中

 new Vue({
	 router,//把路由挂载到页面
	 render(h){return h(App)}
 }).$mount("#app")

B.使用

1. 添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to到注册的路由名
   to属性的值会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

2. 添加路由填充位（路由占位符），跳转后的页面会显示在此处

<router-view></router-view>

3. 定义路由组件

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

小结：
Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作
A.导入js文件
B.将路由挂载到Vue实例中
C.配置路由规则并创建路由实例
D.定义路由组件
E.添加路由链接
F.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

补充：
路由重定向：可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可，如下：

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: '/user',
		component: () => import("../views/root.vue"),
    redirect:"/user/goods_rank",// 访问/时默认重新访问/goods_rank
	children: [{
            name:"goods_rank",
			path: "goods_rank",
			component: () => import("../views/root/goods_rank.vue")}]
        
    ]
})

嵌套路由，动态路由的实现方式

A.嵌套路由的概念(★★★)

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最关键的代码在于理解子级路由的概念：
比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:
/login/account
/login/phone

参考代码如下：

var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
    var Login = { template: `<div>
        <h1>This is Login</h1>
        <hr>
        <router-link to="/login/account">账号密码登录</router-link>
        <router-link to="/login/phone">扫码登录</router-link>
        <!-- 子路由组件将会在router-view中显示 -->
        <router-view></router-view>
        </div>` }

    //定义两个子级路由组件
    var account = { template:"<div>账号：<input><br>密码：<input></div>"};
    var phone = { template:"<h1>扫我二维码</h1>"};
    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            { 
                path: "/login", 
                component: Login,
                //通过children属性为/login添加子路由规则
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

页面效果大致如下：

B.动态路由匹配(★★★)

var User = { template:"<div>用户：{{$route.params.id}}</div>"}

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
       ]
})

补充：
如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数

var User = { 
    props:["id"],
    template:"<div>用户：{{id}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true },
   ]
})

2.还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用

var User = { 
    props:["username","pwd"],
    template:"<div>用户：{{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
	        //通过/:参数名  的形式传递参数 
	        //如果props设置为对象，则传递的是对象中的数据给组件
	        { 
		        path: "/user/:id", 
		        component: User,
		        props:{username:"jack",pwd:123} 
	        }
        ]
})

3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。

var User = { 
    props:["username","pwd","id"],
    template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为函数，则通过函数的第一个参数获取路由对象
        //并可以通过路由对象的params属性获取传递的参数
        //
        { path: "/user/:id", 
        component: User,
        props:(route)=>{
            return {username:"jack",pwd:123,id:route.params.id}
            } 
        }
    ]
})

命名路由以及编程式导航

A.命名路由：给路由取别名

案例：

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过name属性为路由添加一个别名
        { path: "/user/:id", 
        component: User, 
        name:"user"},
    ]
})

1. 添加了别名之后，可以使用别名进行跳转

<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>

2. 还可以编程式导航

myRouter.push( { name:'user' , params: {id:123} } )

B.编程式导航(★★★)

页面导航的两种方式：
A.声明式导航：通过点击链接的方式实现的导航
B.编程式导航：调用js的api方法实现导航

Vue-Router中常见的导航方式：
this.router.push(“hash地址”);
this.router.push("/login");
this.router.push({ name:‘user’ , params: {id:123} });
this.router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:“jack”} });
this.router.go( n );//n为数字，参考history.go
this.router.go( -1 );