vue-router 的简单应用
一、基本路由。
1、引入 vue.js。
<script type="text/javascript" src="../vue/vue.js"></script>
2、引入核心的插件 vue-router。
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
3、安装插件 Vue.use(VueRouter)； 让 vue 使用该 VueRouter 创建。
Vue.use(VueRouter);
4、创建路由对象。 var router = new VueRouter({ });
var router = new VueRouter({ });
5、配置路由规则。
5.1、直接在路由对象里配置路由规则。
var router = new VueRouter({ // 4.配置路由对象 routes:[ // 5.路由匹配的规则 { path:'/login', component:Login }, { path:'/register', component:Register } ] });
5.2、使用路由对象，调用其 addRoutes 函数，并向其中传入路由配置规则。
6、将配置好的路由对象交给 Vue，在 options 传递，key 叫做 router。
// 8.将配置好的路由对象关联到vue实例化对象中 new Vue({ el:'#app', router:router, template:`<App />`, components:{ App } });
7、留坑（使用组件）。<router-view></router-view>
<!--路由组件的出口--> <router-view></router-view>
8、router-link 默认被渲染为 a 标签，to 默认被渲染为 href 属性。
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性--> <router-link to = '/login'>登录</router-link> <router-link to = '/register'>注册</router-link>
代码如下：
<div id="app"></div>
<!-- 1.先引入vue.js -->
<script type="text/javascript" src="../vue/vue.js"></script>
<!-- 2.引包 引入 核心的插件vue-router -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 2.让vue使用该VueRouter创建
Vue.use(VueRouter);
//声明组件
var Login = {
template:`<div>我是登录页面</div>`
};
var Register = {
template:`<div>我是注册页面</div>`
};
// 3.创建路由对象
var router = new VueRouter({
// 4.配置路由对象
routes:[
// 路由匹配的规则
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
}
]
});
// 抛出两个全局的组件 router-link router-view
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link to = '/login'>登录</router-link>
<router-link to = '/register'>注册</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`
}
// Cannot read property 'matched' of undefined
// 5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,
template:`<App />`,
components:{
App
}
});
</script>
二、命名路由。
1、在创建路由对象时，给路由对象一个名称。{path: '/login', name: 'login', component: Login} 。
var router = new VueRouter({ // 3.配置路由对象 routes:[ // 4.创建路由匹配的规则 { path:'/login', name:'login', component:Login }, { path:'/register', name:'register', component:Register } ] });
2、在 router-link 的 to 属性中 描述这个规则，通过名称找路由对象，获取其 path ，生成自己的 href。
<router-link :to="{name:'login'}">登陆</router-link>
代码如下：
<div id="app"></div>
<script type="text/javascript" src="../vue/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 0.安装插件
Vue.use(VueRouter);
// 1.声明Login、Register路由组件
var Login = {
template:'<div>我是登陆页面</div>'
}
var Register = {
template:'<div>我是注册页面</div>'
}
// 2.创建路由对象
var router = new VueRouter({
// 3.配置路由对象
routes:[
// 4.创建路由匹配的规则
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
// 5.抛出两个全局组件 router-link router-view
var App = {
template:`
<div>
<!-- router-link默认会被渲染为a标签，router-view默认会被渲染为herf标签 -->
<router-link :to="{name:'login'}">登陆</router-link>
<router-link :to="{name:'register'}">注册</router-link>
<!-- 6.路由组件的出口 -->
<router-view></router-view>
<div>
`
};
// 6.将配置好的路由关联到vue实例对象中
new Vue({
el:'#app',
router:router,
template:`
<App/>
`,
components:{
App,
router
}
});
</script>
大大降低了维护成本，锚点值改变只用在main.js中改变path属性即可。
总结：
vue-router 的使用步骤：1、引入。2、安装插件。3、创建路由实例。4、配置路由规则。5、将路由关联到 Vue。6、留坑。
router-link 普通路由 to="/xxx"。
命名路由：1、在路由规则对象中加入 name 属性。
2、在 router-link 中 :to="{name: 'xxx'}"。
生僻 API 梳理：
1、Vue.use(插件对象)； // 过程中会注册一些全局组件，及给 vm 或者组件对象挂载属性。
2、给 vm 及组件对象挂载的方式：
