vue 路由的使用

-安装路由模块
npm install vue-router -s

2.设计路由界面

3.创建静态路由表
在src 下创建routes.js 然后导入你的组件
import Home from ‘./views/Home’
import Products from “./views/Products”;
//暴露出一个路由
export const routes=[
{

path:'/Home',
component:Home,//这个Home是要显示的组件，也就是网页或者视图

},
{
path:’/Products’,
component: Products,
}
]

4.在main.js中使用路由模块，以及注册路由表
在main.js中依次按照如下顺序执行
import Vue from ‘vue’
import App from ‘./App.vue’
import VueRouter from ‘vue-route’ //1.引入路由模块
import {routes} from “./routes”; //2.引入静态路由表

Vue.use(VueRouter)//3.使用路由模块
// 创建一个VurRoute模块对象的实例
const router=new VueRouter({
routes:routes,
})
new Vue({
el: ‘#app’,
router,//5.把route放在vue实例中
render: h => h(App)
})

5.创建路由连接和路由视图在App.vue 中

首页 商品列表

7.路由参数的传递:
1.设置参数
通过路由表设置路由参数
{
path:’/Products/:id’,
component: Products,
}
2.传参
用过router-link的to 访问路径时携带参数

• 手机

• 3.接参
  在目标vue中，通过vue中的$route.params.id

  4.路由之间的两种调转方式
  1.通过HTML中的路由连接进行跳转
  

• 家电
• 
  2.通过js实现路由的跳转
  methods:{
  btnfn:function () {
  this.$router.push(‘TCProducts/1’)
  }
  },

  五、Vue组件样式表中的作用范围!
  如果vue组件中的style标签没有带上scoped属性，那么style的样式将会作用在整个页面中,而不是当前子组件
  那么因此加上scoped,让样式作用在当前组件中

  六：关于资源打包
  开发一个vue项目，标准的步骤：
  1.用vue-cli 拉取一个项目骨架
  2.安装依赖
  3.使用npm run dev 进入开发者模式
  此时在开发者模式中，各种修改都能看到实时的效果，那么这些内容实际上是由vue-cli进行打包并发布在node.js上的
  那么，最后开发完以后，这些资源需要我们手动部署在我们的服务器上，那么那些资源是由我们手动部署的，因此通过npm run build命令来构建资源
  4.使用 npm run build 来构建资源
  会产生一个dist文件夹。里面包含静态资源。
  因此在开发环境下要想使用静态资源，首先用过npm run build 命令来创建dist文件夹，然后将静态资源放入，再在vue的代码中，
  去该dist文件夹内取资源即可